When a user clicks on a small thumbnail image I then want a larger div element on the same page to then display that image. So far that works with the following code:
$(document).ready(function () {
$("img#thumb").click(function () { //when image with ID thumb is clicked change src
var imgpath = $(this).attr("src");
$("img#cover").attr("src", imgpath);
});
});
However I now want the old image to fade out while simultaneously switching the new one depending on whichever thumbnail the user clicks. I track the thumb clicked by making jQuery save the src file to a variable then put that in a new path using .attr()
How can I do this?
Not sure i catched what you need but this should be ok, try :
$(function(){
$("img#thumb").bind('click',function () {
var img = $(this).clone(); //this clones the img, so you do not need to re-load that using src path
$(this).fadeOut(500);
$("img#cover").hide().html(img).fadeIn(500); //remove .hide() segment if you just are hiding by css rules
});
});