2012-09-02 9 views
0

이미지 $.ajax분리 Photoswipe 인스턴스가

Photoswipe 인스턴스를 통해 그려은 $.ajax

가 브라우저의 뒤로 버튼에 Photoswipe 인스턴스 사용자가 클릭을 분리 시도 내에서 생성되지만를 분리 할 수 ​​없습니다입니다 .

누구든지 이것을 극복하기위한 가능한 해결책을 알고 있습니까? 나는이 당신을 도울 여부,하지만 것입니다 있는지 확실하지 않습니다

+0

어떻게 사진 닦이 인스턴스를 연결합니까? 갤러리 수업을 통해? 또는...? – adamdehaven

+0

나는 $ .ajax() 메소드 안에

 var myPhotoSwipe = $(".gallery a").photoSwipe({ \t \t \t \t \t enableMouseWheel: false, }) 
안에 이것을했다. –

답변

0

...

나는 클래스 gallery-page있는 페이지로 PhotoSwipe를 부착 한 다음 클래스 gallery 어떤 컨테이너에 실제 PhotoSwipe 인스턴스를 연결하는 <a href="../path/image.jpg" rel="external">...</a>의 이미지가 포함되어 있습니다.

또한 각 페이지에 ID를 제공합니다. 따라서 index.html은 id="gallery1"입니다. 같은 문 (각 페이지에 대해 하나) 여기에 표시하면

그럼, 실제로 .gallery 클래스에 PhotoSwipe을 연결하는 전화 내 script.js 파일에, 내가 사용 :

나는 각 페이지에 대해이 작업을 수행
// ..... bunch of JS, including PhotoSwipe core 

// Create "exists" function for PhotoSwipe code 
jQuery.fn.exists = function(){return this.length>0;} 

// Create PhotoSwipe instance for a page that has id="gallery1" 
if ($('#gallery1').exists()) { 
     // Do something 
     var myPhotoSwipe = $("#gallery1 .gallery a").photoSwipe({ 
      allowUserZoom: false, 
      backButtonHideEnabled: true, 
      enableMouseWheel: false, 
      enableKeyboard: false, 
      cacheMode: Code.PhotoSwipe.Cache.Mode.aggressive, 
      captionAndToolbarAutoHideDelay: 0, 
      captionAndToolbarShowEmptyCaptions: false, 
      jQueryMobile: true 
     }); 
} // .... continue on for other page IDs 

, 각 특정 페이지에 대해 원하는대로 PhotoSwipe 설정을 사용자 정의합니다. exists 함수를 만들었으므로 마지막 ID와 다른 ID를 가진 페이지에서 PhotoSwipe 인스턴스가 제거되고 다른 id="galleryN"이 있으면 해당 설정/이미지가 대신 연결됩니다.

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

+0

도움을 주셔서 감사합니다, 그것을 제거하는 방법을 발견했습니다. 제 솔루션을 살펴보십시오. –

0

마지막으로 해결책을 찾았습니다. 아래를 참조하십시오

 
$.ajax({ 
     url: URL_TO_GET_JSON, 
     success: function(json, status) { 
      var p = []; 
      $.each(json, function(a,b){ 
       //DRAW IMAGES HERE. 
      }); 
      $('.gallery').html(photo.join('')); 


     // CREATE INSTANCES HERE   
      var myPhotoSwipe = $(".gallery a").photoSwipe({ 
       enableMouseWheel: false, 
      }) 

      /********** UNSET INSTANCES HERE *****************/ 

      $(document).bind('pagebeforechange', function(e) { 
       if ($('.ps-carousel').length) { 
        $('body').removeClass('ps-active'); 
        var photoSwipe = window.Code.PhotoSwipe; 
        var photoSwipeInstance = photoSwipe.getInstance($(myPhotoSwipe).attr('id')); 
        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) { 
         photoSwipe.unsetActivateInstance(photoSwipeInstance); 
         photoSwipe.detatch(photoSwipeInstance); 
        } 
       } 
      }); 
     } 
    });