Добрый день. На сайте есть 5 табов и для каждого из них нужно создать отдельную галерею изображений. Написал свой скрипт:
$(document).ready(function () {
var slidenum = 0;
var navBtnId = 0;
$('.gallery-controls').click(function() {
navBtnId = $(this).index();
if (navBtnId != slidenum) {
$('.gallery_viewport > li').eq(slidenum).fadeOut(300);
$('.gallery_viewport > li').eq(navBtnId).fadeIn(300);
slidenum = navBtnId;
}
});
$('.gallery_viewport > li').hide().eq(0).show();
});
Но проблема в том, что когда я начинаю добавлять в каждый таб галерею, то фотки как будто бы конфликтуют меж собой. Если добавить только одну галерею, то всё работает отлично. Можно было бы конечно для каждой галереи придумать свой класс и написать 5 таких скриптов, но хотелось бы придумать более изящное решение). Как можно это реализовать?
Вот код в html:
<div class="article_gallery">
<div class="slide_gallery">
<ul class="gallery_viewport" data-tab='1'>
<li><img src="img/rectangle.png" alt=""></li>
<li><img src="img/rectangle2.jpg" alt=""></li>
</ul>
</div>
<div class="block-gallery-controls">
<div class ="gallery-controls" data-tab='1'>
<div class ="border-controls-gallery">
<img src = "img/rectangle.png" alt="1">
</div>
</div>
<div class ="gallery-controls" data-tab='1'>
<div class ="border-controls-gallery">
<img src = "img/rectangle2.jpg" alt="1">
</div>
</div>
</div>
</div>