jquery help: Galleriffic with Captify (or similar caption overlay)?

[morkus64]

Can't figure out how to get these two to play nice. I've got galleriffic up and going nicely, but can't get captify to sit on top.

Galleriffic wants each image to be like this, where the img tag contains the thumbnail and the link contains the full sized image:

<li>
     <a class="thumb" name="leaf" href="image.jpg" title="Title">
          <img src="image_thumbnail.jpg" alt="Title"  />
     </a>
</li>

Captify wants either

<img src="image.jpg" class="captify" alt="Caption Text" />

or

<img src="image.jpg" class="captify" rel="caption1" />
<div id="caption1"> Whatever caption you like </div>

but since the img tag is for the thumbnail, not the full sized image, it won't show up on the full image (and it just screws up the thumbnail).

Is there a way to reconcile the two or another way to get a smooth fading caption on hover?

 

[Ka0t1x]

You can find where in Gallerific it builds the DOM for the bigger image, and insert the captify code there.

Edit:
Looks like on Ln# 624 it starts buildImage that contains the image wrapper and you could modify the imageData.image object with captify's stuff.

It would probably be easier to do with the second captify method, because I think the div can be anywhere in the DOM, and you can default it to hidden.

 

[morkus64]

You can find where in Gallerific it builds the DOM for the bigger image, and insert the captify code there.

Edit:
Looks like on Ln# 624 it starts buildImage that contains the image wrapper and you could modify the imageData.image object with captify's stuff.

It would probably be easier to do with the second captify method, because I think the div can be anywhere in the DOM, and you can default it to hidden.

Thanks, but can you be more specific? I'm new to jquery and i'm just learning this stuff as I go. I tried to grab the relevant bits and insert them fracked it up. Oy.

 

[morkus64]

Not sure if this helps at all or is obvious to people who actually understand all this stuff properly, but I put in some test images separate from the galleriffic stuff and the rollover captions work. I also tried putting them other places and they seemed to work everywhere but inside the unordered list that galleriffic uses. Maybe there is something to glean from that?

 

[Ka0t1x]

You can add this inside of that buildImage segment. But this still doesn't work.. it could possibly be because they both use similar CSS selectors

	newSlide.find('img').addClass('captify');
	newSlide.find('img').attr('alt','This is an old camera.');

But you'd need to hack into gallerific a way to pass the actual caption from the thumbnail onto the real image. The code above would set the caption to be the same for every image.

 

[morkus64]

Hrm. What about with the rel and div method - might something like this work?

	newSlide.find('img').addClass('captify');
	newSlide.find('img').attr('rel','captifyCaption');

and then in each ul item:

	<div id="captifyCaption">Caption text.</div>

 

[morkus64]

Hrmmm... Or, might it work to use jquery to apply a class (captify) and rel (captifyCaption) to all images in slideshow? (div.slideshow img). Then put a div with id captifyCaption within each ul item?

Perhaps that makes no sense. I'm not sure how that code would be written. Maybe something like:

$('div.slideshow img').addClass('captify');

not sure how you would add the rel...? Hrm. I really need to properly learn some of this at some point.

 

[Ka0t1x]

The same way as before

$('div.slideshow img').attr('rel','relvalue');

 

[morkus64]

Oh, ha! that's easier. Now to see if it actually works...

Edit: Nope. Hrm.