[jQuery] Image replacement Gallery based on links with fade
I found this site http://www.webdesignerwall.com/demo/jquery/img-replacement.html
and like the image replace but i would like to add a fade in effect
when you hover over a link or click on a link.
Also would this work the same way if i wanted to update a div with new
content?
I have tried searching for simple image replacement but this was the
only one i could find.
Any one know of an easier way or better way to do this?
Example of what i am trying to do...
<IMG id="largeImg" alt="Large image" src="ImageReplacement_files/img1-
lg.jpg">
<P class=thumbs>
<A title="Image 2" href="http://www.webdesignerwall.com/demo/jquery/
images/img2-lg.jpg"><IMG src="ImageReplacement_files/img2-thumb.jpg"></
A>
<A title="Image 3" href="http://www.webdesignerwall.com/demo/jquery/
images/img3-lg.jpg"><IMG src="ImageReplacement_files/img3-thumb.jpg"></
A>
<A title="Image 4" href="http://www.webdesignerwall.com/demo/jquery/
images/img4-lg.jpg"><IMG src="ImageReplacement_files/img4-thumb.jpg"></
A>
<A title="Image 5" href="http://www.webdesignerwall.com/demo/jquery/
images/img5-lg.jpg"><IMG src="ImageReplacement_files/img5-thumb.jpg"></
A>
<A title="Image 6" href="http://www.webdesignerwall.com/demo/jquery/
images/img6-lg.jpg"><IMG src="ImageReplacement_files/img6-thumb.jpg"></
A>
</P>
JQuery Code:
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
Any help would be greatly appreciated.