防止将同一图像两次添加到阵列

Question

I have an image gallery composed of single images as well as photosets. For the latter, I add additional divs to position them side by side. Below is my HTML:

<div class="container">

<article>
<figure>
<div data-layout="1212" id="justified">
<div class="photoset-row photoset-row-1" style="overflow: hidden;">
<div class="photoset-cell" style="display:inline-block;overflow:hidden;vertical-align:top;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;"><img src="https://unsplash.it/1200/900/?image=702" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>
<div class="photoset-row photoset-row-2" style="margin-top: 3px; overflow: hidden;">
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-right: 1.5px;"><img src="https://unsplash.it/1200/900/?image=695" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-left: 1.5px; float:right;"><img src="https://unsplash.it/1200/900/?image=675" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>

</div>
</article>
</figure>

<article>


<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=511" data-width="1200" data-height="900">
</figure>

</article>


<article>

<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=514" data-width="1200" data-height="900">
</figure>

</article>

I then use jQuery to create an array for Photoswipe as follows:

'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
$('article').find('figure, .photoset-cell').each(function() {
var $link = $(this).find('img, video'), 
  item = {
    src: $link.attr('src'),
    w: $link.data('width'),
    h: $link.data('height'),
  };
container.push(item);
}), 

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

// Prevent location change
event.preventDefault();

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

}(jQuery));

Everything works fine except for one thing: the first mage in the photoset array gets added twice to the array. How can I prevent this from happening?

You can see a demo here: https://codepen.io/anon/pen/MOprem

Answer 1

Your problem is that your photoset-cell divs are enclosed in a <figure> element. So this code:

$('article').find('figure, .photoset-cell')

finds that <figure> element and pushes the first image inside it ie

<img src="https://unsplash.it/1200/900/?image=702"

then that first photoset-cell (the one with image 702) is found and the image inside it is pushed again. Hence you get two copies of the first image in your gallery.

The easiest fix is to remove the <figure> element around the photoset-cell divs. If that's not possible for layout reasons, then based on the code you have supplied, the easiest fix is probably to change this line:

$('article').find('figure, .photoset-cell').each(function() {

to:

$('article').find('figure.post, .photoset-cell').each(function() {