0

我正在使用Papermashup.com的简单 jQuery 库,需要帮助扩展它的功能。我目前有 4 个缩略图和 1 个主图像。但是,我希望能够恢复到原始图像,而无需原始图像的额外缩略图。如果以及当您单击另一个缩略图时,是否可以恢复为原始状态?

HTML:

<div class="main"><img src="main.jpg"></div>

<div class="thumbs">
   <a class="t" href="main-lrg.jpg" rel="1"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="2"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="3"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="4"><img src="main-1.jpg"></a>
</div>

JS:

$(function() {
    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        return false;
    });
});
4

1 回答 1

0

在 DOM 加载时获取原始图像src属性,以便您对其进行引用。然后,当您想再次显示原始图像时,您只需将主图像的src属性设置回原始图像即可。例如,如果你有一个 ID 为“close”的按钮,它应该显示原始图像,它看起来像这样:

$(function() {
    var original = $('.main img').attr('src');

    $('#close').click(function() {
        $('.main img').attr('src', original);
        $(this).hide();
    });

    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        $('#close').show();
        return false;
    });
});
于 2013-04-10T21:32:07.293 回答