我尝试使用photoswipe.com js制作图库视图,当插入动态div然后它失去了功能,图像可见但不能点击能够帮助
<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>
- &GT;
答案 0 :(得分:0)
工作示例:http://jsfiddle.net/Gajotres/62Eca/
<!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文档有点不清楚如何正确初始化这个插件。
如果您可以在官方网页上找到它,您会发现 here 。如果你仔细看一下,你会看到在官方网站上找到的代码,这个代码不匹配。如果你仔细查看旧的插件(只是打开它的js文件),你会发现它正在使用 live 功能。如果您使用的是较新版本的jQuery,我敢打赌,如果您将函数 live(... 替换为函数 on(... 。<),这个旧代码将会起作用。 / p>