Question

我尝试使用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;

Answer 1

工作示例：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>

的JavaScript：

$( 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>

解决方案：

切换到较新版本的Photoswipe（您需要使用我上面找到的代码）
编辑旧的photoswipe js文件，并用上的功能替换 live 功能的所有内容。

我尝试使用photoswipe.com js制作图库视图，当我插入动态div然后它失去了功能

1 个答案:

HTML：

的JavaScript：

更新

解决方案：