2012-05-09 3 views
0

jquery 모바일을 사용하여 웹 사이트를 만들고 거의 모든 것이 잘 작동합니다. 하지만 약간의 문제가 있으며 Photoswipe (http://www.photoswipe.com/)와 관련이 있습니다.jQuery Mobile + Photoswipe, 아약스가있는 갤러리로드 중?

이 발생하는 것입니다 :

나는 카테고리로 나누어 여러 가지 casepages 있습니다. 내가 caseite에 들어갈 때 내가 갤러리를 클릭 할 수있을 때, 이미지는 나타나고 잘 작동한다. 그러나이 케이스 페이지에서 직접 다른 케이스 페이지로 이동하여 해당 갤러리를 열려고 시도합니다. 아무 반응이 없습니다. 그러나 내가 직접 다른 casepage로 가서 (갤러리가없는) 페이지를 방문한 다음 새 사례로 이동하십시오. 갤러리가 열립니다. jquery 모바일 표준 아약스 처리를 사용하므로 모든 페이지에 아약스가로드되고 다른 하나는 <head>과 다르지 않습니다.

갤러리 이미지는 PHP와 MySQL로로드되지만 <ul>의 ID는 항상 같습니다. #갱도.

동일한 ID를 가진 갤러리가있는 페이지간에 직접 이동할 때 이와 관련이있을 수 있습니까? 뭔가 엉망이 되니?

자바 스크립트 :

(function(window, $, PhotoSwipe){ 
      $(document).ready(function(){ 

       $('div.gallery-page') 
        .live('pageshow', function(e){ 

         var 
          currentPage = $(e.target), 
          options = {}, 
          photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id')); 

         return true; 

        }) 

        .live('pagehide', function(e){ 

         var 
          currentPage = $(e.target), 
          photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id')); 

         if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) { 
          PhotoSwipe.detatch(photoSwipeInstance); 
         } 

         return true; 

        }); 

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


$('div:jqmData(role="page")').live('pageinit',function(){ 

    var options = { 
     jQueryMobile: true 
    }; 
    $("#Gallery a").photoSwipe(options); 

}); 

HTML

<ul id="Gallery" class="gallery"> 
<li><a href="01.jpg" rel="external"><img src="01.jpg" alt="1" /></a></li> 
<li><a href="02.jpg" rel="external"><img src="02.jpg" alt="2" /></a></li> 
</ul> 
+0

나는 동일한 문제로 고통 받고있다. 표준 jquery 호출을 사용하면 스 와이프가로드 될 수 있지만 페이지를 확대/축소하면 검정색이됩니다. 그렇지 않으면 링크를 "스 와이프 가능"으로 등록 할 수 없습니다. –

+0

글쎄 실제로 문제는 내가 #IDs intsead ofClasses를 사용한다는 것입니다. 그래서 그것을 수업으로 바꾸면 효과가 있습니다. – Paparappa

답변

0

클래스 이름 "갤러리"를 바꾸기에 "갤러리 페이지"이것은 내 코드입니다.