PhotoSwipe не работает при загрузке первой страницы

Question

Я использую Photoswipe gallery с jQuery Mobile. Первый выбор при щелчке показывает только изображение с полным 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.

благодарит заранее.

harikris.

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));