javascript - 显示较大的初始图像

Question

我在页面加载时显示了第一个较大的图像，但是我想在单击缩略图时显示更大的图像，最初我不想在加载页面时显示任何更大的图像。最初只应显示缩略图。

这是尝试过的链接：

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

Answer 1

听起来你想要的是这样的：

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();
    });
});
​

Answer 2

你只需要评论这一行 -

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

并$('#panel img').hide();在开头添加

工作小提琴

Answer 3

在每个缩略图 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"));

hth