jquery - 基本的 jQuery 画廊

Question

如果有人能帮助我解决一个小的 jquery 问题，我将不胜感激。我没有编写 jquery 的知识，我精通 HTML CSS 和实现 jquery 插件。

我正在为该网站构建一个图库页面。目前我在 jquery carosel 中有一行缩略图，效果很好。

这是我需要的:

当用户单击缩略图时，我希望它的大图像在当前舞台上的大图像(第一个缩略图)的顶部淡入淡出。

我相信这对于具有编写 jquery 基本知识的任何人来说都足够简单。

这是我当前的源代码。

http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery.html

感谢您的帮助!

贾勒特

Answer 1

首先你需要给你的大图添加一个ID

<img id="gallery-big" src="images/gallery/wedding/large/1.jpg" width="940" height="445" />

之后我会更改图像的名称，以便大图像和缩略图都具有相同的名称但放在不同的文件夹中，如下所示:

images/gallery/wedding/large/1.jpg
images/gallery/wedding/thumbs/1.jpg

完成后，您可以添加以下 JQuery 代码

var clickable = true;

$(document).on("click", ".thumb a", function(event)
{
    event.preventDefault();

    if (clickable == true)
    {
        clickable = false;

        // Get URL of the large image
        var nameIMG = $("img", this).attr("src");
        nameIMG = nameIMG.replace("thumbs/", "large/");

        // Fade in the new image
        $("#gallery").append('<div class="big-overlay"><img src="' + nameIMG + '" width="940" height="445" /></div>');
        $(".big-overlay").fadeIn("slow", function()
        {
            // Change the original <img> to the new image
            $("#gallery-big").attr("src", nameIMG).load(function()
            {
                // Remove the overlay
                $(".big-overlay").remove();
                clickable = true;
            });
        });
    }
});

...以及以下 CSS 规则

.big-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}

这段代码的作用是添加一个覆盖图，其中包含被单击的拇指图像的大版本并将其淡入。完成后，它会更改原始图像的搜索路径 (#gallery-big)，然后删除覆盖图.

它可能不是最好的解决方案，但它应该能胜任 :)