1

ページが読み込まれるときに最初の大きな画像を表示していますが、サムネイル画像をクリックすると大きな画像を表示したいのですが、最初はページを読み込むときに大きな画像を表示したくありません。最初はサムネイルのみを表示する必要があります。

これは試したリンクです：

http://jsfiddle.net/L7yKp/37/

4

3 に答える 3

0

各サムネイル div に次のようなものを追加します。

rel="http://images1.videolan.org/images/largeVLC.png"

取得するため：

<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0" rel="http://images1.videolan.org/images/largeVLC.png">

次に、次のようなコードを使用して画像を遅延読み込みします。

$("#thumbs .UiUx3DSSVFlow").click(function(){
    getIndex = $(this).index();
    $("#thumbs .clicked").removeClass('clicked');
    $("#panel img").attr("src",$(this).attr("rel")); 
    $(this).addClass('clicked');     
});

それはここに示されています：

http://jsfiddle.net/webwarrior/L7yKp/55/

次の行を非表示にして、最初は何も表示しないようにすることができます。

//$(".displayimage").attr("src",$($("#thumbs .UiUx3DSSVFlow")[0]).attr("rel"));

h番目

于 2012-08-28T06:18:39.167 に答える
0

あなたが望むのはこれのようです：

http://jsfiddle.net/L7yKp/38/

$("#panel img").hide(); //<= remove the :not(first-child) filter

$("#thumbs .UiUx3DSSVFlow").click(function(){
    getIndex = $(this).index();
    $("#thumbs .clicked").removeClass('clicked');
    $("#panel img").fadeOut('fast').eq(getIndex).fadeIn();  
    $(this).addClass('clicked');     
});

//$("#thumbs .UiUx3DSSVFlow:first").click(); //<= don't simulate the first click
$(['next','prev']).each(function(){
    var that=this;
    $('.'+that).click(function(){
        $('#thumbs .clicked')[that]().click();
    });
});
​
于 2012-08-28T05:55:41.730 に答える
0

この行にコメントするだけです -

//$("#thumbs .UiUx3DSSVFlow:first").click();

$('#panel img').hide();そして冒頭に追記

働くフィドル

于 2012-08-28T06:00:27.157 に答える