У меня есть галерея из трех изображений, выстроившихся рядом друг с другом. Начнем с того, что центральное изображение велико и два изображения с обеих сторон малы. Когда вы нажимаете левое изображение (например), среднее и правое изображение сдвигаются на 100 пикселей, а левое изображение становится большим. Затем, например, если вы снова нажмете на среднее изображение, 3 изображения сдвинутся вправо, а среднее изображение снова станет большим и так далее.
Код, который я написал, пока не работает, внешние divs увеличиваются при нажатии, но не сжимаются снова, а средний div никогда не делает ничего при нажатии.
Может кто-нибудь сказать мне, что не так с моим кодом:
if($('.main_image').hasClass('active_image')){
$('.second_image').click(function () {
$('#images_holder').animate({
left: "+100"
});
$('.main_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
if($('.main_image').hasClass('active_image')){
$('.third_image').click(function () {
$('#images_holder').animate({
left: "-100px"
});
$('.main_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
if($('.second_image').hasClass('active_image')){
$('.main_image').click(function () {
$('#images_holder').animate({
left: "0px"
});
$('.second_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
if($('.second_image').hasClass('active_image')){
$('.third_image').click(function () {
$('#images_holder').animate({
left: "-100px"
});
$('.second_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
if($('.third_image').hasClass('active_image')){
$('.main_image').click(function () {
$('#images_holder').animate({
left: "0px"
});
$('.third_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
if($('.third_image').hasClass('active_image')){
$('.second_image').click(function () {
$('#images_holder').animate({
left: "+100px"
});
$('.third_image').removeClass('active_image') ;
$(this).addClass('active_image');
});
}
вот JSfiddle моей работы: http://jsfiddle.net/QS3BW/3/
Вы не можете поставить if
хотите. Это событие, которое запускает код. Когда у вас есть событие click
, вы можете поставить условие.
Попробуйте что-то вроде этого:
$("#images_holder").children().click(function(){
// if has class run this code
// else if has this class, run this code
...
});