基本的jQuery库 [英] basic jQuery Gallery

问题描述

如果任何人可以帮助我处理一个小问题，我将不胜感激。我不知道如何写jquery回我精通HTML CSS和实现jquery插件。

I would be grateful if anyone could help me with a small jquery problem. I have no knowledge in writing jquery back am proficient in HTML CSS and implementing jquery plugins.

我正在构建一个画廊页面到这个网站。目前我在jquery carosel中有一行缩略图，效果很好。

I am building a gallery page to this web site. Currently i have got a row of thumbnails in a jquery carosel that works perfectly.

这里是我需要的：

当用户点击缩略图时，我希望其大图像交叉淡出在当前在舞台上的大图片的顶部（第一个缩略图）。

When the user clicks a thumbnail i want its large image to cross fade over the top of the large image that is currently on the stage (the first thumbnail).

Im对于有基本的写jquery知识的人来说，这是很简单的。

Im sure this is simple enough for anyone who has a basic knowledge of writing jquery.

这是我当前的源代码。

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

感谢您的帮助！

Jarrett

推荐答案

首先，您需要为您的大图像添加ID

First you need to add an ID to your big image

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

之后，我将更改图像的名称，以使大图像和缩略图相同的名称，但是放在不同的文件夹，如下：

After that I'd change the names of the images so that the large image and the thumbnail both have the same name but are put in different folders, like this:

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

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

When that's done you can add the following JQuery code

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规则

...and the following CSS rule

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

此代码的作用是添加一个叠加层，点击缩略图图像并淡入它。当完成后，它会更改原始图像的搜索路径（＃gallery-big），然后删除重叠。

What this code does is that it adds an overlay containing the large version of the clicked thumb image and fades it in. When that's done it changes the search path of the original image (#gallery-big) and then removes the overlay.

最好的解决方案，但它应该做的工作：）

It might not the best solution, but it should do the job :)

这篇关于基本的jQuery库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！