0

我正在尝试修改一个 JQuery Slider 以根据用户将大图像替换为另一个：如果他将鼠标悬停在一个小图像上，它将以更大的格式加载。

所以在脚本的某个时刻，我有加载图像过程：

// call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);

        };

        // begin loading the image from www.flickr.com
        img.src = url;

但是我在这里尝试做的是更改原始 src，通过向 src url 添加一些字符，以便当用户将鼠标悬停在图像上时，另一个会加载到滑块中（当然与小的有关） .

例如，如果我在小框中有 product1.jpg，并且用户将鼠标悬停在它上面，我想在滑块中加载 product1Big.jpg。

这是完整的脚本：

        $(function() {
        $(".scrollable").scrollable();

        $(".items img").hover(function() {
            // see if same thumb is being clicked
            if ($(this).hasClass("active")) { return; }

            // calclulate large image's URL based on the thumbnail URL (flickr specific)
            var url = $(this).attr("src").replace("_t", "");

            // get handle to element that wraps the image and make it semi-transparent
            var wrap = $("#image_wrap").fadeTo("medium", 0.5);

            // the large image from www.flickr.com
            var img = new Image();


            // call this function after it's loaded
            img.onload = function() {

                // make wrapper fully visible
                wrap.fadeTo("fast", 1);

                // change the image
                wrap.find("img").attr("src", url);

            };

            // begin loading the image from www.flickr.com
            img.src = url;

            // activate item
            $(".items img").removeClass("active");
            $(this).addClass("active");

        // when page loads simulate a "click" on the first image
        }).filter(":first").click();
    });
4

0 回答 0