how to get a upsliding caption at bottom for the jquery accordion image slider of kwicks

问题

I am using this accordion slider.

Everything is okay except I need for each of the images , individual text that will sit at the bottom of the respective image on a certain background (i.e. gray). While an image is being displayed, that text with the background will just slide up on the image. The height of the text part will be small (if the image height is 250px , then the text part height can be 50 px ).

Anybody out there just to tell which part of the js and html to be modified and in which way?

Sliding up effect or placing a text over an image is quite easy but I am looking for the solution in the case of a not-so-small (in my view at least ) script .

回答1:

You'll need to use an updated version of Kwicks one which has callbacks.

Then add the captions, css to position 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();
    }

});

来源：https://stackoverflow.com/questions/11351293/how-to-get-a-upsliding-caption-at-bottom-for-the-jquery-accordion-image-slider-o