Ich baue eine Bildergalerie mit photoswipe (http://photoswipe.com/), aber ich habe eine harte Zeit herauszufinden, wie Sie Videos zu dem Array hinzufügen. Unten ist mein HTML:Jquery: Hinzufügen von img und Video zum Array
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>
Und hier ist meine 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));
Hier ist ein Stift, wenn es einfacher ist: https://codepen.io/NordStorm/pen/Kqbpaj
Was mache ich falsch?
ich bemerkt, dass Sie finden, img und Video 'var $ link = $ (this) .find ('img, Video'),' das ändern zu 'var $ link = $ (this) .find ('Video '), '. es wird funktionieren –