Simple JQuery fadein/fadeout BUT with captions
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.
Here is the site I'm working on ... http://www.salliefindlay.com/2d.php
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.
I've done exactly that on my wife's site here:
with this script:
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.
Which of the four .js files are required for that part of your script?
So far, I've included:
Not sure if I still need to have the other two. And 1.8.2 is the newer version 1.4.2
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.
SB65 and Stephan ...
I got it working OK. (but not perfect).
I'm mean OK because I haven't figured-out how to 'fadein' after an 'addClass'.
Here's my test page:
It now fades out OK, and then pops-in fast. Which is fine, but I wish I could
control the fadein.
But, thanks for letting me see your function. I modified it for my purposes, but
it got me on the right path.
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:
Oh my ... that is so nice. Thank you.
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.
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.
Here's the final rendering with the fade effects in-place:
Glad it helped.
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.
Thanks again! I learn new things everyday.
|All times are GMT +1. The time now is 06:00 PM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.