Предотвратить одновременное добавление одного и того же изображения в массив

117
12

У меня есть галерея изображений, состоящая из отдельных изображений, а также фотографий. Для последнего я добавляю дополнительные div, чтобы расположить их бок о бок. Ниже мой 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>

Затем я использую jQuery для создания массива для Photoswipe следующим образом:

'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));

Все работает отлично, за исключением одного: первый маг в массиве фотосет добавляется дважды к массиву. Как я могу предотвратить это?

Вы можете увидеть демо: https://codepen.io/anon/pen/MOprem

спросил(а) 2021-01-25T15:48:57+03:00 4 месяца, 4 недели назад
1
Решение
124

Ваша проблема заключается в том, что ваши photoset-cell заключены в элемент <figure>. Итак, этот код:

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

находит элемент <figure> и выталкивает первое изображение внутри него, т.е.

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

то эта первая photoset-cell (то есть с изображением 702) будет найдена, а изображение внутри нее снова будет нажато. Следовательно, вы получаете две копии первого изображения в своей галерее.

Самое простое исправление заключается в удалении элемента <figure> вокруг photoset-cell фотосети. Если это невозможно по соображениям компоновки, то на основе кода, который вы предоставили, самым простым решением, вероятно, является изменение этой строки:

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

чтобы:

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

ответил(а) 2021-01-25T15:48:57+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема