Portfolio show up question

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

Any demo or sample code around ?

--

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

A quick and easy solution would be to store the larger filename in the rel tag, and use that to swap the source of a larger image on the page. You could expand this with fade-in and fade-out effects, but I'll provide only the base here:

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" />
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" />
<img class="preview" src="image01-hr.jpg" />

$(".thumbnail").click(function(e){
  $(".preview").attr("src", $(this).attr("rel"));
});

Answer 2

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.