如何在 kwicks 的 jquery 手风琴图像滑块底部获得向上滑动的标题 [英] how to get a upsliding caption at bottom for the jquery accordion image slider of kwicks

问题描述

我正在使用 这个手风琴滑块.

I am using this accordion slider.

一切都很好，除了我需要每个图像，单独的文本将位于特定背景(即灰色)上相应图像的底部.在显示图像时，带有背景的文本只会在图像上向上滑动.文字部分的高度会很小(如果图片高度是 250px ，那么文字部分的高度可以是 50 px ).

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 ).

有没有人来告诉js和html的哪一部分需要修改，以何种方式修改?

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 .

推荐答案

您需要使用 更新版本的Kwicks 一个有回调的.

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

然后添加字幕，css定位字幕和如下回调代码(这里有一个demo):

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();
    }

});

这篇关于如何在 kwicks 的 jquery 手风琴图像滑块底部获得向上滑动的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！