본문 (view) 페이지에서 (첨부,에디터 사진) 이미지 슬라이드 - SmartPhoto > 그누보드5 팁자료실

그누보드5 팁자료실

본문 (view) 페이지에서 (첨부,에디터 사진) 이미지 슬라이드 - SmartPhoto 정보

본문 (view) 페이지에서 (첨부,에디터 사진) 이미지 슬라이드 - SmartPhoto

본문

https://sir.kr/g5_skin/46140

웹학교님의 스킨을 참고 했습니다.

 

https://sir.kr/g5_skin/49766?page=2

본문 이미지 자동 슬라이드는 비타주리님 스킨 추천합니다.

 

https://appleple.github.io/SmartPhoto/

위 링크 js를 사용했습니다. 

 

990709638_1650573185.4452.jpg

 

 

왼쪽의 뷰페이지에 상단 작은 이미지 버튼 클릭하면 오른쪽처럼 브라우저에 꽉찬 화면으로 슬라이드됩니다.

자동 슬라이드는 아니고 드래그로 작동합니다.

 

<!--smartphoto  추가 1/3 시작 (view.skin.php 상단)-->
<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">
<!--smartphoto  추가 1/3 끝-->

 

 

<!--smartphoto  추가 2/3 시작 (view.skin.php 이미지 버튼 출력할 위치)-->

 

<style>
.object{width: 70px; height: 70px; float:left;margin-right:5px;margin-bottom:5px;border-radius:10px;}
.cover {object-fit: cover}
</style>

<?php
//첨부파일
      for ($i=0; $i<count($view['file']); $i++) {
      if (preg_match("/\.(gif|jpg|jpeg|png)$/i", $view['file'][$i]['file'])) {?>
<a href="<?php echo $view['file'][$i]['path'].'/'.$view['file'][$i]['file']?>" class="js-smartPhoto" data-caption="<span style=font-size:1.5em;font-weight:bold;><?php echo $view['wr_subject']?></span>" data-id="" data-group=""/ >
<img  class="object cover" src="<?php echo $view['file'][$i]['path'].'/'.$view['file'][$i]['file'] ?>"></a>
<?php }} ?>

<?php
//에디터파일
         $b_cont_img= get_editor_image($view['content']);
         for ($i=0; $i<count($b_cont_img[1]); $i++) {
         $b_imgurl_v = explode('"', $b_cont_img[1][$i]);
 ?>
<a href="<?php echo $b_imgurl_v[1]?>" class="js-smartPhoto" data-caption="<span style=font-size:1.5em;font-weight:bold;><?php echo $view['wr_subject']?></span>" data-id="" data-group=""/>
<img  class="object cover" src="<?php echo $b_imgurl_v[1]?>"></a>
<?php } ?>

 

<!--smartphoto  추가 2/3 끝-->

 

 

 

<!--smartphoto 추가 시작 3/3 시작 (view.skin.php 하단)-->

<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartPhoto",{
    resizeStyle: 'fit'

  });
document.querySelector(".gnb_wrap").style.display = "none";
});
</script>
<!--smartphoto 추가 끝 3/3 끝-->

 

 

저 세부분을 적당한 위치에 넣어주면 되겠습니다.

초보라서 나름 검색과 상상력을 동원해서 만든거라 뭔가 허술한 부분이 있습니다. 저렇게 해도 되나 싶기도 하고요.

원래 노림수도 저 작은 버튼이 아니라 본문에 흩어져있는 썸네일 이미지 아무거나 클릭하면 슬라이드 되는 거였는데 초보의 한계를 느껴서 포기한 부분도 있습니다. 현재 슬라이드는 원본이미지를 불러오는 거라서 트래픽을 신경쓰셔야 될거 같습니다. 가능하다면 고수분들께서 다듬어 주시면 좋겠습니다.

 

감사합니다.

 

 

추천
6

댓글 5개

전체 2,132 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT