jQuery Mobile 1.4.2 + Photoswipe 1.0.11
Posted
技术标签:
【中文标题】jQuery Mobile 1.4.2 + Photoswipe 1.0.11【英文标题】： 【发布时间】：2014-07-21 23:34:29 【问题描述】：我正在尝试使用最新版本的 jQuery Mobile 来实现最新版本的 Photoswipe。我什至使用包含在 Photoswipe 下载文件中的已经制作的示例，我只是将 jQuery 和 jQuery mobile 更新到最新版本。这样做之后，画廊立即不起作用。有没有人设法让它工作？
如果不可能，有什么好的替代方案可以在最新的 jQuery Mobile 上运行？
最好的，
【问题讨论】：
确保在pagecontainershow上初始化插件。
【参考方案1】：
继续使用 Photoswipe。你的问题是版本不匹配。几周前，最初的开发者停止了这个框架的工作，另一个开发者接管了这个项目。但不知道的是，第二个开发者很久以前就分叉了这个项目，并且这个插件有两个不同的版本。
原来的 jQuery Mobile 之前停止了工作。第二个实现当前持有版本：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" /></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" /></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" /></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" /></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" /></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" /></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" /></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" /></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" /></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);
);
【讨论】：
以上是关于jQuery Mobile 1.4.2 + Photoswipe 1.0.11的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery Mobile仿360首页，jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页