0

我在我的 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 非常陌生。谁能帮我这个

谢谢

4

3 回答 3

0

用这个

(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-04T07:01:32.677 回答
0

希望这将有助于使用画廊 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>

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

<h4>&copy; 2013</h4>

</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-04T10:48:36.087 回答
0 
$('div.gallery-page').on('pagehide', function(e){
                        PhotoSwipe.unsetActivateInstance(instance);
                        PhotoSwipe.detatch(instance); 
                        return true;

                    })

;

于 2013-10-30T16:27:55.423 回答