PhotoSwipe가 처음으로 페이지로드시 작동하지 않습니다.

Question

jQuery Mobile에서 Photoswipe 갤러리를 사용하고 있습니다. 첫 번째 선택 항목을 클릭하면 전체 URL이 포함 된 이미지가 표시되고 갤러리 방식으로는 작동하지 않습니다. 다시 돌아가서 다시 선택하면 정상적으로 작동합니다. ps는 첫 번째 실패/페이지 새로 고침 후 작동합니다.

아래 링크를 확인하십시오. 내 모바일 웹 사이트. http://w3qatar.info/aldarmobi

등록 정보> 목록에서 속성> 다른 사진보기 ... 링크를 확인하면 축소판을 찾을 수 있습니다. 미리보기 이미지를 먼저 클릭하면 갤러리보기없이 원본 이미지가로드됩니다.하지만 다시 돌아와서 다시 시도하면 작동합니다. 테스트를 위해 오페라 모바일 에뮬레이터를 사용하고 있습니다. Drupal 7 Mobile_jquery 테마. Jquery mobile이이 사이트에서 사용됩니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <link href="http://w3qatar.info/aldarmobi/sites/all/themes/mobile_jquery/photoswipe.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://w3qatar.info/aldarmobi/sites/all/themes/mobile_jquery/lib/klass.min.js"></script> 
    <script type="text/javascript" src="http://w3qatar.info/aldarmobi/sites/all/themes/mobile_jquery/scripts/code.photoswipe.jquery-3.0.5.min.js"></script> 

<script type="text/javascript"> 

(function(window, PhotoSwipe){ 

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

     var 
       options = {}, 
       instance = PhotoSwipe.attach(window.document.querySelectorAll('#gallery li a'), options); 

     }, false); 

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

    </script> 

HTML 부분 : 코드 내부

<ul id="gallery" class="gallery"> 
<li><a href="imageurl1" rel="external"><img src="imageurl1" alt="image name1" /></a></li> 
<li><a href="imageurl2" rel="external"><img src="imageurl2" alt="image name2" /></a></li> 
<li><a href="imageurl3" rel="external"><img src="imageurl3" alt="image name3" /></a></li> 
<li><a href="imageurl4" rel="external"><img src="imageurl4" alt="image name4" /></a></li> 
</ul 

당신이 좀 도와 주 시겠어요? iPhone 기기 및 Android 휴대 전화에서이 기능을 사용하고 싶습니다.

미리 감사드립니다.

하리 크리스.

Answer 1

jQuery를 사용하는 코드를 보여줍니다. 왜 모든 것을하지 않습니까?

당신은 아래와 같은 코드를 변경하고 작동 표시 여부를

(function(window, $, PhotoSwipe){ 

    $(document).ready(function(){ 

     $('div.p-img_more') 
      .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));