jQuery Mobile 1.4.2 + Photoswipe 1.0.11

jQuery Mobile 1.4.2 + Photoswipe 1.0.11

本文关键字：Photoswipe Mobile jQuery      更新时间：2023-09-26

我正在尝试使用最新版本的jQuery Mobile实现最新版本的Photoswipe。我甚至使用已经制作的例子包括在Photoswipe下载文件，我只是更新jQuery &jQuery移动到最新版本。这样做之后，画廊就不能工作了。有人成功做到了吗?

如果这是不可能的，有什么好的选择，它与最新的jQuery移动工作?

,

继续使用Photoswipe。你的问题是版本不匹配。最初的开发人员几周前停止了这个框架的工作，另一个开发人员接替了这个项目。但不知道的是，这个第二个开发者很早以前就把这个项目分叉了，并且这个插件有两个独立的版本。

原来的一个停止与jQuery移动工作了。第二个实现目前的版本是:3.0.5。不幸的是，这个版本不再可用。据我所知，第二个开发人员正在将这两个项目合并在一起。

幸好我有可用的3.0.4版本

工作示例:http://jsfiddle.net/Gajotres/PFqVs/

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://www.photoswipe.com/latest/photoswipe.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/klass.min.js"></script>            
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>            
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>
            <div data-role="content">
                <ul class="gallery">           
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/001.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/002.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image 002" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/003.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/003.jpg" alt="Image 003" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/004.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/004.jpg" alt="Image 004" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/005.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/005.jpg" alt="Image 005" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/006.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/006.jpg" alt="Image 006" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/007.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/007.jpg" alt="Image 007" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/008.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/008.jpg" alt="Image 008" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/009.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/009.jpg" alt="Image 009" /></a></li>
                </ul>
            </div>
        </div>    
    </body>
</html>
JavaScript: 

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });
    myPhotoSwipe.show(0);      
});
相关文章：