Запретить добавление одного и того же изображения дважды в массив - PullRequest
Новая
       8

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

0 голосов
/ 09 мая 2018

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

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

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

1 Ответ

0 голосов
/ 10 мая 2018

Ваша проблема в том, что ваши 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() {
...