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 url にいくつかの文字を追加して元の src を変更することです。これにより、ユーザーが画像にカーソルを合わせると、代わりに別の画像がスライダーに読み込まれます (もちろん小さいものに関連します)。 .

たとえば、小さなボックスに 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