Всем здравствуйте.
Столкнулся с такой проблемой.
Нужно вывести по клику картинки. Дело обстоит в том что для плагина baguetteBox нужно картинки в таком формате
<div class="gallery ">
<a href="img/0198f9f765/3cef5c8.jpeg">
<img src="img/0198f9f765/3cef5c8.jpeg">
</a>
<a href="img/0198f9f765/80c3556.jpeg">
<img src="img/0198f9f765/80c3556.jpeg">
</a>
<a href="img/0198f9f765/5068354.jpeg">
<img src="img/0198f9f765/5068354.jpeg">
</a>
<a href="img/0198f9f765/b6332fc.jpeg">
<img src="img/0198f9f765/b6332fc.jpeg">
</a>
</div>
У меня на каждое событие своя "пачка" картинок, и я по событийно вывожу картини на страницу.
И того у меня получается
<div class="gallery ">
<a href="img/0198f9f765/3cef5c8.jpeg">
<img src="img/0198f9f765/3cef5c8.jpeg">
</a>
</div>
Вот кусок кода которым я вывожу картинки
if (data.contents) {
var prod = '';
var $wrapper = $('#allproducts');
for (var ix in data.contents[page]) {
prod += '<div class="col-xs-12 col-md-4">';
prod += '<div class="thumbnail gallery">';
let ctn=data.contents[page][ix]['src'].length;
for(let i=0;i<ctn+1;i++) {
prod += '<a href="' + data.contents[page][ix]['src'][i] + '">';
prod += '<img style="z-index:'+i*10+'" id="' + ix + '" src="' + data.contents[page][ix]['src'][i] + '"';
prod += 'alt="' + data.contents[page][ix]['alternate'][i] + '"';
prod += '/>';
prod += '</a>';
};
prod += '<div class="caption">';
prod += '<p>' + data.contents[page][ix]['small_text'] + '</p>';
prod += '</div>';
prod += '</div>';
prod += '</div>';
}
$wrapper.html(prod);
}
Задача обстоит в следующем как под одной картинкой спрятать остальные. Дабы потом выводить все картинки по клику. И что бы картинки "прятались" одна под другую.
position absolute or relative
иz-index