Question

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.

我正在为这个网站建造一个快乐网页。目前,在一只精干的 j车中,一只row。

HERES WHAT I NEED:

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).

相信这一点对于具有撰写分类学基本知识的人来说是简单不过的。

我目前的来源代码就是此。

感谢你的帮助!

Jarrett

Answer 1

首先,你们需要为你们的大形象增加一个身份证。

<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

如果是的话,你可以补充以下《联邦法典》。

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

......和以下《社会保障法》规则

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

这部法律的确增加了一个超支,其中包含被点击的umb形图象的大量版本。这样做时,会改变原有形象的搜索途径(#gallery-big),然后消除超支。

它可能不是最佳解决办法,而是应当做以下工作:

Answer 2

Try j Query Light Box plugin.

>http://leandrovieira.com/projects/jquery/light Box/

Answer 3

如果您的大麻确实如此,则将data-src=“position_of_full_size_image.jpg”添加到umb和onClick。

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

友情链接