본문 페이지에서 이미지 슬라이드 - SmartPhoto

https://sir.kr/g5_tip/18357

전에 올렸던 팁에서 그 당시에 못했던 본문 이미지를 클릭하면 스마트포토 실행을 하는 방법을

99%영감(?)과 1%의 챗gpt 도움(????)으로 완성했습니다.;;;;;

본 이미지 슬라이드는 자동이 아니고 수동입니다.

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

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

주의 - 제 그누보드는 코어도 많이 건드린 상태에서 테스트 된거라, 다른 분들 그누보드에서 제대로 작동할 지는 장담할 수 없습니다.

게시판 상단에 추가

<!--smartphoto  추가 1/2 시작-->
<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/2 끝-->

게시판 하단에 추가

<!--스마트포토 추가 2/2 시작-->
<script>
document.addEventListener('DOMContentLoaded', function () {
    function wrapImages(container) {
        if (container) {
            var images = container.getElementsByTagName('img');
            for (var i = 0; i < images.length; i++) {
                var img = images[i];
                if (img.parentNode.tagName.toLowerCase() !== 'a' || !img.parentNode.classList.contains('js-smartPhoto')) {
                    var imgSrc = img.src;
                    var fileName = imgSrc.split('/').pop();
                    
                    var a = document.createElement('a');
                    a.href = imgSrc;
                    a.className = 'js-smartPhoto';
                    a.setAttribute('data-caption', img.alt || fileName);
                    a.setAttribute('data-id', '');
                    a.setAttribute('data-group', 'gallery');

                    img.parentNode.insertBefore(a, img);
                    a.appendChild(img);
                }
            }
        }
    }

    wrapImages(document.getElementById('bo_v_img')); // 첨부파일 이미지 처리
    wrapImages(document.getElementById('bo_v_con')); // 본문 이미지 처리

    // 스마트포토 초기화
    new SmartPhoto(".js-smartPhoto");
});
</script>
<!--스마트포토 추가 2/2 끝-->