Как сделать фотогалерею как в google картинки?

Question

[puple_gal]

Как сделать фотогалерею как в google картинки?
То есть нажимаешь на фото допустим в 1 ряду - раскрывается галерея под первым рядом, нажимаешь на фото в 5 ряду - открывается галерея под 5 рядом
И все это еще должно быть адаптивным ....


Моя логика изначально была такая:
Происходит клик по элементу - высчитывается его позиция сверху от родительского + его высота + отступ
var top = gallery_item.position().top + gallery_item.height() + 20;

И я пытаюсь в эту координату вставить код со слайдером
var html_slider = слайдер
$(".gallery").prepend(html_slider ).css({top: top, left: 0});

Код написала тут https://codepen.io/anon/pen/mgeMqL
Если слайдеру делать position: absolute, то он налазит на остальные элементы галереи, нужно как-то сделать padding равный высоте слайдера - чтобы появилось место для absolute, но не могу сообразить как это сделать

Comments

[Ankhena]

Вставляйте не по координатам, а считайте сколько элементов в строке и вставляйте после последнего в нужной строке.

[Сергей delphinpro]

не нужно абсолюта. нужно найти первую картинку в следующем ряду и перед ней вставить блок шириной 100%. в этот блок затолкать слайдер.
учитывая адаптив, нужно постоянно отслеживать ресайз. при ресайзе картинки могут смещаться, переходить на новую строку. При открытом слайдере этого нельзя допускать. также нужно обеспечить постоянное положение слайдера в области просмотра.
Задача нетривиальная, с кондачка не решается, основная работа по реализзации ложится на javascript.

Answer 1

[puple_gal]

Может кому пригодится - написала примерное решение (открытие слайдера в нужном месте)
https://codepen.io/anon/pen/gywERq