Question

我在jQuery Mobile页面中使用Photo Swipe（http://www.photoswipe.com/）。我想在加载时显示图像的缩略图。单击缩略图，将用户带到启用滑动的图库，该图库占据屏幕高度的30％。我想在底部展示一些其他内容。我正在使用PhotoSwipe 版本3.0.5 并尝试指定 TARGET 。但是没有回应。以下是js文件，使用的代码

<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非常陌生。任何人都可以帮助我

由于

Answer 1

使用此

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

Answer 2

希望这有助于使用gallery div下面的脚本

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

<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"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>

Answer 3

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

                    })

照片滑动目标无法在jQuery Mobile上运行

3 个答案: