All geek questions in one place

I am trying to do a gallery view using photoswipe.com js, when I insert a dynamic div, then it lost functionality

I am trying to do a gallery view using photoswipe.com js, when I insert a dynamic div, then it lost functionality, the images are visible, but do not click the capable help 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>
                                                       ->

+4
source share
1 answer

Working example: 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);           
    });    
});

Update:

, -, 2-3 , . , 3.0.5, .

, , jQuery, jQuery 1.7.3 , jQuery, - .

. , , , , GitHub , .

-, . , , -, . ( js ), , live. jQuery, , , live (... (....

:

  • Photoswipe ( , )
  • photoswipe js live .
0

Source: https://habr.com/ru/post/1544452/

More articles:


All Articles