Making an img switch source with a 200ms crossfade using jQuery animate?

Question

Here's my relevant code, I'm switch the image according to where I click. Is there some way for me to gradually switch the images? Maybe animate them while switching? A sort of fade in fade out.

<script type="text/javascript">
    jQuery(document).ready(function ($) { //fire on DOM ready
        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })

        $('#smallpictureone').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturetwo').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturethree').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefour').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefive').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });
    });
</script>

I have another related question about my javascript code. I'm using a Javascript library I found online that allows me to zoom the image around very nicely. However, when I switch the src to another image, the zoom remain on the first. So I'm 're-hooking' the library to the image each click I make. Does this have a negatie performance hit I'm not aware of? Will a current gen correctly clean up after me?

Answer 1

Just because I'm a stickler; You can super-simplify your JS code by reducing your code repetition by using a better selector. You can chain selectors by using a comma to separate them.

<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on DOM ready
    $('#mainproductpicture').addpowerzoom({
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200] //<--no comma following last option!
    })

    $('#smallpictureone, #smallpicturetwo, #smallpicturethree, #smallpicturefour, #smallpicturefive').click(function () {
        $("#mainproductpicture").attr("src", $(this).attr("src"));

        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })
    });
});
</script>

But you could do even better by not targeting those ids at all and using a class instead. eg:

$('.smallpicture').click(function(){ /* ... */ });

You can also reduce your repetition by declaring your "addpowerzoom" options beforehand and reusing the variable reference. eg:

var powerZoomOpts = {
  defaultpower: 2,
  powerrange: [2, 5],
  largeimage: null,
  magnifiersize: [200, 200]
};

Then in your call to initialize the power zoom plugin:

 $('#mainproductpicture').addpowerzoom(powerZoomOpts);

But wait! There's more. You can also chain the powerzoom onto the attr() call on the line before that. eg:

$("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);

For a final result of:

<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on DOM ready
    var powerZoomOpts = {
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200]
    };

    $('#mainproductpicture').addpowerzoom(powerZoomOpts);

    $('.smallpicture').click(function () {
        $("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);
    });
});
</script>

Doesn't that look so much better?

In order to cross-fade (as others have stated) You must have two img elements. One positioned overtop the other. The bottom image should start off being hidden from view by the image on top. It won't yet have a src attribute.

The second step is to change the src of the bottom img to be the image you want to crossfade to. Then you .fadeOut(200) the top image. Use a callback function to change the top image's src attribute to the bottom image's src attribute so as to 'prime' the set of images for the next crossfade.

Here's an example:

var $topimg = $('#topimage');
var $bottomimg = $('#bottomimage'); /* cache $topimg & $bottomimg jQuery objects for later use */

$('.fadeable-images').click(function(e){
  $bottomimg.attr('src', $(this).attr('src'));
  $topimg.fadeOut(200, function(){
    $topimg.attr('src', $bottomimg.attr('src')).show();
  });
});

The rest is CSS to align the two image tags in the appropriate positions.