Trouble changing a fadeTo() to a fadeIn() in jQuery tools

Question

I'm using jQuery Tools Scrollable with this setup. I'm having trouble changing the transition effect on the large image.

When you click a thumbnail, the large image fades out-and-in (you can see this behaviour in the demo by visiting the link). I the large image to fade in, only.

I assumed it's as simple as changing the transition in var wrap = ... fadeTo() to fadeIn(), but that's not the case. I also changed the transition on the wrap.fadeTo() line, and that did not work.

Any ideas why? I snipped unnecessary code from my example...

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

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);
        var img = new Image();

        img.onload = function() {
            wrap.fadeTo("fast", 1);
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});

HTML

<div id="image_wrap">Large image goes here</div>
<div class="scrollable">
    <div class="items">
        <div>
            thumbnails go here
        </div>
    </div>
</div>

Answer 1

What is img? And you can't add a .load() function to something that is already loaded, also if you add multiple .load() functions to 1 element and it will be loaded, all the .load() functions that you binded before will also be called.

And maybe you wan't to do a .stop(true, false) before you call the .fadeTo() methods, because if your already fading, it stops it, clears the queue and fades to the new position. So you don't have to wait untill it is partialy loaded.

Update

If you don't want the fadeout, but only the fade in use this:

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

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap"); // This line edited
        var img = new Image();

        img.onload = function() {
            wrap.css("opacity", 0.5).fadeIn(); // This line edited
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});