PhotoSwipe 갤러리를 열려면 이미지를 사용하십시오

Question

Im 솔루션을 찾으려면 img 링크가 인 PhotoSwipe 갤러리를 너무 열어야합니다. 그래서 갤러리 아이콘이있는 IMG가 있습니다. 그리고 나는 갤러리가 열린 것을 사용자가 클릭하면 좋겠다.

어떻게 누군가에게 내가 그 핸드북을 줄 수 있을지 생각해 보시겠습니까?

나는 이것을 발견했다. 그러나 이것은 갤러리를로드하는 것에 열립니다. 난 그냥 photoSwipe 작업을 시작

<script type="text/javascript"> 
     (function(window, PhotoSwipe){ 

      document.addEventListener('DOMContentLoaded', function(){ 

       var 
        options = { 
         preventHide: true 
        }, 
        instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 

        instance.show(0); 

      }, false); 


     }(window, window.Code.PhotoSwipe)); 

</script> 

최저 regargs

Answer 1

그래서이 작동합니다 긍정적 아니라고하지만 당신은 단지 클릭 이벤트에 instance.show(0)를 호출 할 필요가 날 것으로 보인다.

내가 페이지에이 요소를 가지고 가정 : (당신이 jQuery를 사용하지 않는 경우

$('#launch-gallery').click(function(evt){ 
    evt.preventDefault(); // prevent regular click action 
    instance.show(0);  // Make sure 'instance' variable is available to this function 
}); 

, 당신은 기본 자바 스크립트에서 같은 일을 수행 할 수 있습니다 <a id="launch-gallery" href="#">Click to launch gallery</a> 나는 갤러리를 시작하기 위해 jQuery를 클릭 이벤트를 추가 할 수 있습니다 그러나 조금 더 장황하게).

이 정보가 도움이되기를 바랍니다.

Answer 2

필자는 php (ajax)를 사용하여 이미지 위치와 크기를 제공하므로 사용자가 직접 json 데이터를 정의해야합니다.

: jsonData이 같은 다소보고하도록되어 있다는

function openPhotoSwipe(jsonData) { 
    var pswpElement = document.querySelectorAll('.pswp')[0]; 

    // define options (if needed) 
    var options = { 
    // history & focus options are disabled on CodePen 
    history: false, 
    focus: false, 

    showAnimationDuration: 0, 
    hideAnimationDuration: 0 

    }; 

    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options); 
    gallery.init(); 
} 

참고 : 여기에 photoswipe 개방 기능입니다

$('.element').off(); //in case it's a dynamically changing element 
$('.element').on("click tap", function() { 
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script 

    $.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) { 
     openPhotoSwipe(json); 
    }); 
    }); 

그리고 : 이것은 내가 와 jQuery를 그것을 어떻게입니다

[ 
{ 
    src: 'https://placekitten.com/600/400', 
    w: 600, 
    h: 400 
}, 
{ 
    src: 'https://placekitten.com/1200/900', 


     w: 1200, 
     h: 900 
    } 
]; 

나는이 대답이 늦었다는 것을 알지만, 이것은 j ust googling 뭔가 완전히 다른 (하지만 photoswipe 관련), 아마도이 유용한 것이라고 생각!