Howdy.
I'm making this little gallery of thumbnails, that if one is clicked on, fadeOut() the current main image, then fadeIn() the clicked on thumbnail.
Its all working, but the problem is that the page always scrolls back to the top after clicking on the thumbnail and the main image fades out. I've tried using return false; but to no avail. In fact, I've tried using return false on all levels of the stack.
My images are example.jpg for the main img, and then tn_example.jpg for the thumbnail...
$(function() {
$(".photostrip_img")
.click(function()
{
var src = $(this).attr("src");
src = src.replace('tn_', '');
$("#main_img").fadeOut("slow", function() {
$("#main_img").attr("src", src);
$("#main_img").fadeIn("slow");
});
});
});
Psudo code.
For every thumbnail with class photostrip_img
if clicked on
get its' source and remove 'tn_' from it.
fade out the current main image
once fade out is complete
change main src to new src
fade back in
Thanks in advance.
I'm making this little gallery of thumbnails, that if one is clicked on, fadeOut() the current main image, then fadeIn() the clicked on thumbnail.
Its all working, but the problem is that the page always scrolls back to the top after clicking on the thumbnail and the main image fades out. I've tried using return false; but to no avail. In fact, I've tried using return false on all levels of the stack.
My images are example.jpg for the main img, and then tn_example.jpg for the thumbnail...
$(function() {
$(".photostrip_img")
.click(function()
{
var src = $(this).attr("src");
src = src.replace('tn_', '');
$("#main_img").fadeOut("slow", function() {
$("#main_img").attr("src", src);
$("#main_img").fadeIn("slow");
});
});
});
Psudo code.
For every thumbnail with class photostrip_img
if clicked on
get its' source and remove 'tn_' from it.
fade out the current main image
once fade out is complete
change main src to new src
fade back in
Thanks in advance.