Как создать галерею?

Question

[Алексей]

Добрый день. На сайте есть 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>

Answer 1

[Robur]

Замените внутри click $('.gallery_viewport > li') на поиск относительно $(this) - будет в каждой галерее находить то что к ней относится.