基本jQuery库

Question

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

我正在建立一个画廊网页到这个网站。目前，我在jquery carosel中有一排缩略图，可以完美地工作。

这是我需要的：

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

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

这是我当前的源代码。

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

谢谢你的帮助!

Jarrett

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

...and以下CSS规则

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

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

它可能不是最好的解决方案，但它应该可以完成这项工作:)

Answer 2

试试jQuery灯箱插件。

http://leandrovieira.com/projects/jquery/lightbox/

Answer 3

如果你想自己做这件事，那么把data-src="location_of_full_size_image.jpg"加到拇指上，把onClick方法加到拇指上

$('#gallery-big').attr('src', self.data('src'))