Имеется блок картинок. По 3 в строке. Бесконечный, генерирующийся foreach
. Нужно чтобы при клике на любую из картинок, снизу этой картинки выезжал блок с описанием(аля гугл-картинки), при этом сдвигая блоки самих картинок вниз. При клике на следующую, предыдущее описание должно скрываться.
Т.к. блок с описанием на всю ширину, а картинка на треть, блок с описанием имеет position:absolute
. В следствии чего не сдвигает картинки вниз, а появляется поверх. Для выхода из положения был добавлен toggleClass
с margin-bottom
для картинки. Сейчас происходит чехарда и toggleClass
отрабатывает нестабильно. Может есть решение этой проблемы? Или другой рабочий метод.
<div class="col-xs-12 col-sm-6 col-lg-4 view-source" rel="1" >
<div class="programm-item">
//блок с картинкой
</div>
</div>
<!-- ============= -->
<div class="row hiden">
<div class="col-xs-12 programm-details-item ">
//блок с описанием
</div>
</div>
Появление блока с описанием
<script>
$(function(){
//скрываю все блоки с описанием
$('.hiden').hide();
$a = $('.view-source .programm-item');
$a.on('click', function(event) {
//при клике открываю соответствующий блок
event.preventDefault();
$a.not(this).next().slideUp(0);
$(this).next().slideToggle(500);
});
});
</script>
Добавление класса в зависимости от rel
. Т.к. блоки генерируются, какому rel
присвоить класс выясняю методом целочисленного деления.
c= $('div[rel]');
c.each(function() {
$('.view-source').click(function(){
f= $(this).attr('rel');
if ( f%3 == 0) { //3
$('div[rel="'+f+'"]').toggleClass('tp').prevAll('.view-source').removeClass('tp');
$('div[rel="'+f+'"]').nextAll('.view-source').removeClass('tp');
}
if ( f%3 == 2) { //2
$('div[rel="'+f+'"]').prevAll('.view-source').removeClass('tp');
f = parseInt(f)+1; //3
$('div[rel="'+f+'"]').nextAll('.view-source').removeClass('tp');
$('div[rel="'+f+'"]').toggleClass('tp');
}
if ( f%3 == 1) { //1
$('div[rel="'+f+'"]').prevAll('.view-source').removeClass('tp');
f = parseInt(f)+2; //3
$('div[rel="'+f+'"]').toggleClass('tp');
}
});
});
});