본문 (view) 페이지에서 (첨부,에디터 사진) 이미지 슬라이드 - SmartPhoto 정보
본문 (view) 페이지에서 (첨부,에디터 사진) 이미지 슬라이드 - SmartPhoto
본문
웹학교님의 스킨을 참고 했습니다.
https://sir.kr/g5_skin/49766?page=2
본문 이미지 자동 슬라이드는 비타주리님 스킨 추천합니다.
https://appleple.github.io/SmartPhoto/
위 링크 js를 사용했습니다.
왼쪽의 뷰페이지에 상단 작은 이미지 버튼 클릭하면 오른쪽처럼 브라우저에 꽉찬 화면으로 슬라이드됩니다.
자동 슬라이드는 아니고 드래그로 작동합니다.
<!--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'
});
});
</script>
<!--smartphoto 추가 끝 3/3 끝-->
저 세부분을 적당한 위치에 넣어주면 되겠습니다.
초보라서 나름 검색과 상상력을 동원해서 만든거라 뭔가 허술한 부분이 있습니다. 저렇게 해도 되나 싶기도 하고요.
원래 노림수도 저 작은 버튼이 아니라 본문에 흩어져있는 썸네일 이미지 아무거나 클릭하면 슬라이드 되는 거였는데 초보의 한계를 느껴서 포기한 부분도 있습니다. 현재 슬라이드는 원본이미지를 불러오는 거라서 트래픽을 신경쓰셔야 될거 같습니다. 가능하다면 고수분들께서 다듬어 주시면 좋겠습니다.
감사합니다.
7
댓글 5개
