I found so many simple JQuery galleries where you click a thumb
and the <div> above them gets loaded with the full-size image.
There is a fade-out, fade-in effect and it works fine.
But here's the problem ....
Under the full-size image, a caption needs to appear. The caption
is a full sentence that describes the photos.
I can't find anything anywhere that does the fade-out fade-in AND
changes the caption as well.
This one has no fade-in fade-out effect, because if I do that, the
caption won't change. I'm just calling a function to change the
img src and to change the inner.HTML of another div (for the caption).
Does anyone know where there is an example of what I'm doing ...
exactly like that, but adding the fade-out fade-in effect?
This is driving me bananas. I don't want LightBox, or PrettyPhoto,
just a simple script. Thanks.
$(document).ready(function(){
$("#gallery_thumbnails img").click(function() {
//read the new values for the image and the title
newTitle = $(this).attr("alt");
newImage = $(this).attr("src").replace("/thumbnails","");
if (newImage != $(".topImage").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
//
$('.topImage').after('<img class="newImage" width="334" height="500" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'"/>');
//fade the top image out, replace and fade the new one in
$(".topImage").fadeOut(700,function() {
$(".topImage").remove();
$(".newImage").removeClass('newImage').addClass('topImage');
}) ;
//fade the caption out, replace and fade the new one in
$("#gallerycaption").fadeOut('fast',function() {
$("#gallerycaption").html(newTitle);
$("#gallerycaption").fadeIn('fast');
});
return false;
}
})
});
I'm holding the caption as the alt tag on the thumbnail.
The script reads the alt tag, finds the new image from the thumbnail src, inserts it behind the original image and then fades the original image out to give a crossfade effect, then fades the caption out, changes it, and fades it back in again.
It's a couple of years since I wrote this and it could probably be tidied up a bit now, but it does what you want, I think.
Look whether it’s working. If it is you know that you don’t need the other scripts.
However, by the order of inclusion I can tell you that switchGalleryImage.js is most likely not depending on the scripts that come after it. And also, I see nothing in that script that would indicate that jQuery UI or the easing plugin is used.
To confirm, you only need jQuery and switchGalleryImage for the fade effect. The easing and UI are used for other purposes on that page. Should have made that clearer.
My code crossfades the images into each other - looks like you want to fade out the old and then fade in the new. Have a try making your code:
Code:
$(document).ready(function(){
$("#gallery_thumbnails img").click(function() {
//read the new values for the image and the title
newTitle = $(this).attr("alt");
newCaption = $(this).attr("caption");
newImage = $(this).attr("src").replace("T.jpg","P.jpg");
if (newImage != $(".topImage").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
//
//$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
//fade the top image out, replace and fade the new one in
$(".topImage").fadeOut(500,function() {
$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
$(".topImage").remove();
$(".newImage").removeClass('newImage').stop(true).addClass('topImage').hide();
$(".topImage").fadeIn('slow');
}) ;
//fade the caption out, replace and fade the new one in
$("#gallerycaption").fadeOut('fast',function() {
$("#gallerycaption").html(newCaption);
$("#gallerycaption").fadeIn('fast');
});
return false;
}
})
});
This seems to work OK - see test page here - although it also helps if the large images are preloaded - as otherwise you can see them loading instead of the fade in. I did this on hat page by including this javascript:
Code:
$(document).ready(function () {
//preload the images
var images = [<?php echo $allimagestring?>];
var imagearray = [];
$(images).each(function(key, value) {
var img = new Image();
imagearray[key] = $(img).attr('src', value);
});
})
where $allimagestring is just a list of all the (large) images.
I just need to generate the list into the string (that will be easy).
The fade effects look nice. You saved me a lot of time, and I appreciate it.
EDIT:
The site owner originally had made Full and Thumbnail filenames the same
except for T.jpg and P.jpg ... but now, as I suspected, they mixed up filenames.
So I had to figure out a way to know what the full-size filename was.
I ended-up creating my own attributes for the thumbnail <img> tag.
It works perfectly, but as anyone might comment, it's no longer W3C validated.
My made-up attributes are not XHTML nor HTML compliant.
But I don't care, because the doctype is: <!doctype html>
Having worked on this with my desktop PC (20 inch monitor), I was a bit
worried about rendering on iPad. But it renders nice. The layout is fluid,
and the images shrink to fit. I have a few <div>s that don't collapse,
but it is what it is. Such a plain site, but I wore myself out on the
fade effects. SB65 provided the clues I needed.
If you make your attributes data-photo instead of photo (for example) then they will validate as HTML5. HTML5 allows custom attributes provided they are in the format data-anynameyouwant.
Before you post, read our: 
