[英]Rotating image caption with the images
I have a photogallery in which i have rotating images with pagination. 我有一个照相馆,其中有带有分页的旋转图像。 I want to display a caption below the image and caption should also change as the image changes.
我想在图像下方显示标题,并且随着图像的变化,标题也应随之变化。
I wrote the following html code 我写了下面的HTML代码
<div class="slider_box">
<div align="left" id="slider2" class="sliderwrapper">
#IMG#
</div>
<div id="paginate-slider2" class="pagination"></div>
</div>
<span class="slider_box">
<span align="left" id="slider" class="sliderwrapper">
#CAPTION#
</span>
</span>
<script>
featuredcontentslider.init({
id: "slider2",
//id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
//toc: "<img src=images/dot_white.jpg align=absmiddle border=0>", //Valid values: "#increment", "markup", ["label1", "label2", etc]
toc: " ",
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
featuredcontentslider.init({
id: "slider",
//id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
//toc: "<img src=images/dot_white.jpg align=absmiddle border=0>", //Valid values: "#increment", "markup", ["label1", "label2", etc]
toc: " ",
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})</script>
The problem with this is that the caption for all images is displayed together below the images not rotating.. :( 问题在于,所有图像的标题都在不旋转的图像下方显示在一起。
Without seeing the rest of your code, I would think you have ONE slider and have this 在没有看到其余代码的情况下,我认为您只有一个滑块,并且具有
<span align="left" id="caption">
#CAPTION#
</span>
and 和
var captions["Caption for image1", "Caption for image2"]
and change the onChange part of your script 并更改脚本的onChange部分
onChange: function(previndex, curindex){
//event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
document.getElementById("caption").innerHTML=captions[curindex];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.