Question

I like to have a portfolio that is dynamic and simple to update.

In one part there will be some little square preview, and hovering or clicking on these preview will update the LARGE section with the whole job.

I know pretty good the : MM_swapImage(), but like to do it in jquery or ajax.

How can I do that?

Some research result : http://code.google.com/p/jquery-swapimage/

—

<SCRIPT LANGUAGE="Javascript">
function swap(pic1, pic2)
{
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic1src = pic1.src;
var pic2src = pic2.src;
pic2.src = pic1src;
pic1.src = pic2src;
}
</SCRIPT>

Answer 1

Here’s my code (just an example, it needs changes to work for you)

$('#imageswitch img').hover(
                function () {
                    var oldsource = $(this).attr('src');
                    var foldername = oldsource.substr(0, oldsource.lastIndexOf('/'));
                    var filename = oldsource.replace(foldername+'/','');
                    var newsource = foldername + '/' + 'hover_' + filename;
                    $(this).attr('src', newsource);
                    $(this).data('src', oldsource);                   
                }, 
                function () {
                    $(this).attr('src', $(this).data('src'));
                }
            );

Create a folder for the images.
The small images are called:
image_1.jpg

the larger images are called
hover_image_1.jpg

(note the ‘hover_’ before the filename)

Hover over an image and it replaces it’s source with the new source (the larger image), when you leave the image with the mouse the old source is restored.