Я хотел бы знать, имел ли кто-нибудь опыт работы с простыми и легкими галереями jQuery.
Мои требования к этому конкретному проекту довольно просты, и я предпринял настоящую попытку развернуть свой собственный код, однако для новичка это немного озадачивает.
У меня большой div, который загружается с исходным изображением.
Далее следует произвольное количество миниатюрных изображений со ссылкой на их соответствующие увеличенные изображения. Все эти изображения имеют одинаковую ширину, но разной высоты.
Я хотел бы щелкнуть по миниатюре, чтобы изображение большого размера исчезло с изображения, установить высоту для нового изображения (конечно, анимированное), а затем исчезнуть на новом изображении.
Я играл с установкой непрозрачности на 1%, чтобы создать эту иллюзию, поскольку установка непрозрачности на 0, похоже, полностью разрушает div.
Для этого не требуется слайд-шоу или какой-либо другой функциональности, но то, что происходит, иногда приводит к тому, что основной div полностью разрушается.
Это мой код
$('.clickedimage').click(function() {
var newhref = $(this).attr('href'); // sets the variable for the new link
var curheight = $('.bigpic').height(); //gets the current height
$('.bigpic').attr('style', "height:"+curheight+"px" );
$('#largeimage').fadeOut('slow', function(){
$('#largeimage').attr('src',newhref);
$('#largeimage').fadeTo('fast', 0.01, function(){
var aheight = $('#largeimage').height();
$('.bigpic').animate({
height: aheight+'px'
}, 500, function(){
$('#largeimage').fadeTo('slow',1);
});
});
});
return false; // do not follow through with the links and disable them
});