How to get an upstream caption below for a kwicks jquery accordion image slider

Question

I use this accordion slider.

Everything is in order, except for what I need for each image, a separate text that will sit below the corresponding image on a specific background (i.e. gray). While the image is displayed, this text with the background will slide up the image. The height of the text part will be small (if the image height is 250 pixels, then the height of the text part can be 50 pixels).

Can anyone just indicate which part of js and html should be changed and how?

The sliding effect or placing text over the image is quite simple, but I'm looking for a solution in the case of a script that is not very small (at least in my opinion).

Answer 1

You will need an updated version of Kwicks that has callbacks.

Then add captions, css to put the captions and the following callback code (here is a demo ):

$('#demo').kwicks({ // event called before kwicks expanding animation begins expanding: function(kwick) { kwick.$kwicks.find('.caption').stop(true,true).slideUp(); kwick.$active.find('.caption').stop(true,true).slideDown(); }, // event called before kwicks collapsing animation begins collapsing: function(kwick) { kwick.$kwicks.find('.caption').stop(true,true).slideUp(); } });