Question

I am attempting to implement a script that will fade in a new set of images, replacing an old set, upon a click event on a button that will be an image or piece of text. To get an idea of what I am looking to replicate (in flash, unfortunately), see the “teaching” section of http://seanjustice.com/.

I found this jfiddle from another topic on stackoverflow, but I wasn’t sure how to use a button and mouse click to replace the set of images instead of using just a simple fade upon hover effect.

So can anyone help me out with suggestions? How do I use a button that will trigger a swap of images?

Answer 1

Using the jsfiddle you provided you could do something like this:

http://jsfiddle.net/H8z2G/41/

$('.fadein').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace("text=1", "text=2");
    $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });

    $('#swapper').click(function() {
        $('.fadein').stop().fadeTo(600, 0);
    });
});​

Sorry, here’s the markup:

<img class="fadein" src="http://dummyimage.com/180x100/000/fff&text=1" alt="" />
<img class="fadein" src="http://dummyimage.com/180x100/cf5/fff&text=1" alt="" />
<img class="fadein" src="http://dummyimage.com/180x100/f0f/fff&text=1" alt="" />

<a href="#" id="swapper">Click Here</a>