Jquery: l'ajout img et vidéo à un tableau

Question

Je construis une galerie d'images en utilisant photoswipe (http://photoswipe.com/), mais je vais avoir du mal à comprendre comment ajouter des vidéos sur le tableau. Ci-dessous est mon HTML:

div class="gallery"> 


    <figure class="photo" role="img"> 
    <div class="content"> 
     <a href="https://photo.page"> 
     <img src="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="thumbnail" data-permalink="http://google.com" alt="Image description" data-title="title2"> 
     </a> 
    </div> 
    </figure> 


    <figure class="photo" role="img"> 
    <div class="content"> 
     <a href="https://photo.page"> 

     <video width="100%" data-width="248" data-height="146" data-permalink="http://google.com" data-title="title" data-caption="Test" autoplay muted> 
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
     <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
     Your browser does not support the video tag. 
     </video> 

     </a> 
     </div> 

Et voici mon JS:

(function($) { 

    // Init empty gallery array 
    var container = []; 

    // Loop over gallery items and push it to the array 
    $('.gallery').find('figure').each(function() { 
    var $link = $(this).find('img, video'), 
     item = { 
     src: $link.attr('src'), 
     w: $link.data('width'), 
     h: $link.data('height'), 
     title: $link.data('caption'), 
     pid: $link.data('title'), 
     attachmentURL: $link.data('permalink') 
     }; 
    container.push(item); 
    }); 

    // Define click event on gallery item 
    $('img').click(function(event) { 

    // Prevent location change 
    event.preventDefault(); 

    // Define object and gallery options 
    var $pswp = $('.pswp')[0], 
     options = { 
     index: $(this).parents('figure').index(), 
     bgOpacity: 0.9, 
     showHideOpacity: true, 
     }; 
    // Initialize PhotoSwipe 
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options); 
    gallery.init(); 
    }); 

}(jQuery)); 

Voici un stylo s'il est plus facile: https://codepen.io/NordStorm/pen/Kqbpaj

Qu'est-ce que je fais mal?

Answer 1

Voici le code mis à jour. Vous avez utilisé figure pour chaque boucle, il boucle chaque figure élément.

'use strict'; 

/* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */ 

(function($) { 

    // Init empty gallery array 
    var container = []; 

    // Loop over gallery items and push it to the array 
    $('.gallery').find('figure video').each(function() { 
    var $link = $(this), 
     item = { 
     src: $link.attr('src'), 
     w: $link.data('width'), 
     h: $link.data('height'), 
     title: $link.data('caption'), 
     pid: $link.data('title'), 
     attachmentURL: $link.data('permalink') 
     }; 

    container.push(item); 
    }); 

    // Define click event on gallery item 
    $('img').click(function(event) { 

    // Prevent location change 
    event.preventDefault(); 

    // Define object and gallery options 
    var $pswp = $('.pswp')[0], 
     options = { 
     index: $(this).parents('figure').index(), 
     bgOpacity: 0.9, 
     showHideOpacity: true, 
     }; 
    // Initialize PhotoSwipe 
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options); 
    gallery.init(); 
    }); 

}(jQuery));