シンプルで軽量なjQueryギャラリーの経験がある人がいるかどうか知りたいです。
この特定のプロジェクトに対する私の要件は非常に単純であり、私は自分のコードをロールすることを真剣に試みましたが、これは初心者にとっては少し不可解です。
初期画像をロードする大きなdivがあります。その後に、それぞれの大きな画像へのリンクを含む任意の数のサムネイル画像が続きます。これらの画像はすべて同じ幅ですが、高さが異なります。
サムネイルをクリックして、大きな画像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
});