Question

I am trying to hack together (1) an image switch menu (roll over an item on the menu, have an image show up elsewhere on the page) with (2) a caption roll over (roll over the image, have caption expand to show longer text).

The caption roll-over is the lovely jCapSlide script, here’s an example of it working:

http://steph-morris.com/jCapSlide.html

(original plug-in from http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/)

Here is an example of the image switch menu completely failing to show the captions, in roll-over state or not:

http://steph-morris.com/novel_test.html

An earlier version of this cobbling-together managed to get the caption displaying IF I removed it from the “ic_container” DIV and moved it into the “overlay” DIV. Sadly I can no longer replicate that. That’s what I love about hacking other people’s scripts, is with how much more finality I manage to break it the more I tinker with it!

Would appreciate any guidance, from directions to a “cobbling two scripts together 101” guide to a handy solution to getting this to work.

Answer 1

Your javascript is mostly fine actually the problem lies with your css. I stripped out some of the styles and it now works correctly for the first one. You’re going to have to play around with the styles a bit to get it the way you want. As for the 2nd one not showing the issue is that for some reason the javascript is having problems when the showcaption option is set to true. A workaround to get it to work is to manually set the ‘ic_caption’ div to have style="display:block;". I couldn’t figure out why it wasn’t working but doing this now makes it show the caption at the beginning.

I set up a working example here: http://jsfiddle.net/dbMGg/1/