Question

如果有人能帮我解决小问题，我将不胜感激。我不懂编写jquery，熟练掌握HTML CSS并实现jquery插件。

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

以下我需要：

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

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

这是我目前的源代码。

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

感谢您的帮助！

Jarrett的

Answer 1

尝试使用jQuery Lightbox插件。

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

Answer 2

如果您想自己动手，请将data-src="location_of_full_size_image.jpg"添加到拇指中，然后使用onClick方法添加拇指

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

Answer 3

首先，您需要为大图片添加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），然后删除叠加层

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

基本的jQuery Gallery

3 个答案: