Question

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

这是尝试过的链接：

Answer 1

听起来你想要的是这个：

$("#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();

Working Fiddle

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

显示较大的初始图像

3 个答案: