Как спрятать картинки одну под другую для галереи

253

09 января 2018, 15:51

Всем здравствуйте.

Столкнулся с такой проблемой.

Нужно вывести по клику картинки. Дело обстоит в том что для плагина 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);
}

Задача обстоит в следующем как под одной картинкой спрятать остальные. Дабы потом выводить все картинки по клику. И что бы картинки "прятались" одна под другую.

Answer 1

Вот с position:absolute; можно сделать то что вы хотели.

Там я добавил js скрипт просто для того что бы вы увидели какая картинка бы не была первой все ровно они один под другим.

$(document).ready(function(){ 
  function getRandomInt(min, max) { 
      return Math.floor(Math.random() * (max - min + 1)) + min; 
  } 
  $('.rand').on('click', function(){ 
    var rand_el = getRandomInt(3,4);     
    $('.gallery').prepend($('.gallery>a:nth-child('+rand_el+')')); 
  }); 
});

.gallery{ 
  position: relative; 
} 
.gallery>a{ 
  position: absolute; 
  width: 200px; 
  height: 200px; 
  top: 0; 
  left: 0; 
} 
.gallery>a:nth-child(1){ 
  z-index: 4; 
} 
.gallery>a:nth-child(2){ 
  z-index: 3; 
} 
.gallery>a:nth-child(3){ 
  z-index: 2; 
} 
.gallery>a:nth-child(4){ 
  z-index: 1; 
} 
.gallery>a>img{ 
  max-width: 100%; 
} 
.rand{ 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="rand">Click me</div> 
<div class="gallery "> 
<a href="img/0198f9f765/3cef5c8.jpeg"> 
<img src="https://i.stack.imgur.com/EPDlQ.png"> 
</a> 
<a href="img/0198f9f765/80c3556.jpeg"> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3fGDQrr3u_7ar8mzH3Sy49Oja7XSvdGCv-kE_BTNPfp10mJow"> 
</a> 
<a href="img/0198f9f765/5068354.jpeg"> 
<img src="https://www.shareicon.net/download/2015/09/29/109012_media.ico">  
</a> 
<a href="img/0198f9f765/b6332fc.jpeg"> 
<img src="http://www.alexyork.net/images/social/stackoverflow-color-512.png"> 
</a> 
</div>