Есть список изображений, которые выводятся по категориям и контейнер, куда выводится изображение при клике
<div id="our_team">
<h3>Категория 1</h3>
<div class="item" id="item-1"><img src="http://blabla"></div>
<div class="item" id="item-2"><img src="http://blabla"></div>
<div class="item" id="item-3"><img src="http://blabla"></div>
<h3>Категория 2</h3>
<div class="item" id="item-4"><img src="http://blabla"></div>
<div class="item" id="item-5"><img src="http://blabla"></div>
<h3>Категория 3</h3>
<div class="item" id="item-6"><img src="http://blabla"></div>
<div class="item" id="item-7"><img src="http://blabla"></div>
</div>
</div>
<div id="popup-container">
<div id="popup-image">
<img>
</div>
<a class="navigation close" name="close"><div>Закрыть</div></a>
<a class="navigation next" name="next"></a>
<a class="navigation prev" name="prev"></a>
</div>
скрипт, который выводит картинку во всплывающее окно
$('#our_team').children('.item').click(function(){
$('#popup-container').addClass('active');
$(this).addClass('active');
show_images();
})
$('#popup-container').children('.navigation').click(function(){
var action = $(this).attr('name');
//alert(action);
if(action == 'close'){
$('#popup-container').removeClass('active');
$('#our_team').children('.item').removeClass('active');
} else if(action == 'next'){
$('#our_team').children('.item.active').removeClass('active').next('.item').addClass('active');
show_images();
} else if(action == 'prev'){
$('#our_team').children('.active').removeClass('active').prev('.item').addClass('active');
show_images();
}
var image_width = $('#popup-image').find('img').outerWidth(),
window_width = $(window).outerWidth(true);
alert(image_width + ' ' + window_width);
})
function show_images(){
var image = $('#our_team').children('.item.active').find('img').clone(),
src = $('#our_team').children('.item.active').attr('href');
$('#popup-image').children('img').animate({'opacity':'0'}, 200, function(){
$('#popup-image').html('<img src="' + src + '"><div></div>');
$('#popup-image').children('img').css({'opacity':'0'}).animate({'opacity':'1'}, 200);
});
}
проблема в строчке $('#our_team').children('.item.active').removeClass('active').next('.item').addClass('active');
класс active нормально присваивается всем элементам до того момента, как выводится заголовок категорий . далее идущим элементам с классом .item класс active не присваивается. В чем может быть проблема?
