我尝试使用photoswipe.com js的画廊视图，当我插入动态div，然后它失去了功能，图像是可见的，但不能点击PLZ帮助
<body >
<div id="Header">
<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div id="gal" class="gallery-row">
<script>
var url = "https://api.flickr.com/services/rest/?method=flickr.people.getPhotos& api_key=008f6dbb151fa0d6afdacea3ff6ef51f&user_id=125323824@N04";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
$.each(data.photos.photo, function(i,item){
src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_s.jpg";
srcc = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_n.jpg";
$(".gallery-row").append('<div class="gallery-item"><a href="'srcc'"><img src="'+src+'" /></a></div>');
if ( i == 5 ) return false;
});
});
</script>
示例:http://jsfiddle.net/Gajotres/62Eca/
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" />
<script src="http://thecodingwebsite.com/tutorials/photoswipe/klass.min.js"></script>
<script src="http://thecodingwebsite.com/tutorials/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>
</head>
<body>
<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>
</ul>
</body>
</html>
$( document ).ready(function() {
var url = "https://api.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=008f6dbb151fa0d6afdacea3ff6ef51f&user_id=125323824@N04";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
$.each(data.photos.photo, function(i,item){
src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_s.jpg";
srcc = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_n.jpg";
$(".gallery").append('<li class="gallery-item"><a href="' + srcc + '"><img src="'+src+'" /></a></li>');
if ( i == 5 ) return false;
});
var myPhotoSwipe = $(".gallery li a").photoSwipe({
jQueryMobile: true,
loop: false,
enableMouseWheel: false,
enableKeyboard: false
});
myPhotoSwipe.show(0);
});
});
更新:
你在官方网站上找到的插件2-3年前已经弃用了，作者只是不想再用它做任何事情。另一个开发人员接受了它，并严重修改了代码，当前版本是3.0.5，它比原始插件好得多。我相信，这个插件不能工作，因为你使用的是较新版本的jQuery，提到的插件只能与jQuery 1.7.3及以下版本一起工作，基本上任何仍然有功能的jQuery版本。
你需要切换到这个新的插件。只要使用附加的代码，它就会像魅力一样工作，你甚至可以重用我的例子中的一切，因为GitHub文档有点不清楚如何正确初始化这个插件。
如果你能在官方网页上找到它，你会在这里找到。如果你仔细看一下，你会发现在官方网站上找到的代码和这个不太匹配。如果你仔细观察旧的插件(只要打开它的js文件)，你会发现它使用了函数live。如果您使用的是较新版本的jQuery，我敢打赌，如果您替换function live(…) with function on(…).
解决方案:
- 切换到新版本的Photoswipe(你需要使用我上面找到的代码)
- 编辑旧的photoswipe js文件，将所有提到的live函数替换为上的函数。