照片滑動與目標不工作jQuery手機

我在我的jQuery Mobile頁面中使用照片滑動（http://www.photoswipe.com/）。我想顯示加載圖像的縮略圖。點擊縮略圖，將用戶帶到佔用屏幕高度30％的滑動啓用畫廊。我想顯示一些其他內容的底部。我正在使用PhotoSwipe 版本3.0.5並嘗試指定TARGET。但沒有迴應。下面是js文件，代碼中使用照片滑動與目標不工作jQuery手機

<head> 

<script type="text/javascript" src="photoswipe/klass.min.js"></script> 
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"><script> 
<script>   
$(document).ready(function(){ 
    var myPhotoSwipe = $("#Gallery a").photoSwipe({ 
    enableMouseWheel: false , 
    enableKeyboard: false 
    }); 
}); 
</script> 

</head> 
<body> 
    <div data-role = "page" data-add-back-btn = "true" id = "mainGallery"> 
     <div data-role = "header" data-theme = "a"> 
      <h1>Gallery</h1>    
     </div> 
     <div data-role = "content" data-theme = "c"> 
      <p>Hi... I am the Photo Gallery</p> 
      <div class = "gallery-wrap"> 
       <ul class = "gallery" id="Gallery" data-role = "listview" data-inset = "true"> 
        <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li> 
        <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li> 
       </ul> 
      </div> 
     </div> 
     <div data-role="footer" data-theme = "c" data-position="fixed"> 
      <h4>&copy; 2013</h4> 
     </div> 
    </div>  
</body>

我很新jQuery Mobile的。誰能幫我這個

感謝

來源

2013-07-04 Vishnu Ram

使用此

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

來源

2013-07-04 07:01:32

感謝您的回覆。我編輯了我使用的實際代碼。你能幫我修改一下嗎？我試着用你的代碼，並沒有成功 –

希望這將有助於使用畫廊DIV

<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

<div data-role = "header" data-theme = "a">

下面的腳本

</div>

<div data-role = "content" data-theme = "c">

<p>Hi... I am the Photo Gallery</p>

<div class = "gallery-wrap">

<ul class="gallery"data-role = "listview" data-inset = "true">

<li><a href="full/001.jpg" rel="external"><img src="full/001.jpg" alt="Image 010" /></a></li>

<li><a href="full/001.jpg" rel="external"><img src="/full/001.jpg" alt="Image 010" /></a></li>

</ul>

</div>

<div data-role="footer" data-theme = "c" data-position="fixed">

</div>

<script>

$('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;

})

</script>

</div>

來源

2013-07-04 10:48:36

$('div.gallery-page').on('pagehide', function(e){ 
         PhotoSwipe.unsetActivateInstance(instance); 
         PhotoSwipe.detatch(instance); 
         return true; 

        })

;

來源

2013-10-30 16:27:55 kamal

照片滑動與目標不工作jQuery手機

回答

相關問題