最近,我在我的项目中创建了Camers幻灯片。所有功能均正常运行。但是,我想以固定的高度和宽度在幻灯片div外部显示字幕。请帮我。下面是我的代码。
<script type="text/javascript">
jQuery(function () {
jQuery('#camera_wrap_3').camera({
height: '56%',
hover: true,
time: 1000,
fx: 'scrollLeft',
pagination: false,
thumbnails: true,
imagePath: '../images/'
});
});
</script>
<div class="fluid_container">
<p>Videos, HTML elements and data- attributes</p>
<div class="camera_wrap camera_emboss" id="camera_wrap_3" style="height: 180px !important;">
<div data-thumb="AutoSlider/Images/big_bunny_fake.jpg" data-src="AutoSlider/Images/SmallThumbs/big_bunny_fake.jpg">
<div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
Content1
</div>
</div>
<div data-thumb="AutoSlider/Images/leaf.jpg" data-src="AutoSlider/Images/SmallThumbs/leaf.jpg">
<div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
Content2
</div>
</div>
<div data-thumb="AutoSlider/Images/road.jpg" data-src="AutoSlider/Images/SmallThumbs/road.jpg" data-time="1500" data-trasperiod="4000" data-link="http://www.google.com/" data-target="_blank">
<div class="camera_caption fadeFromBottom">
Content3
</div>
</div>
</div>
</div>
我知道我参加聚会有点晚了,但是...
由于没有简便的方法可以使用此插件直接进行此操作,因此每次幻灯片更改时,您都可以仅更改div的内容。
根据http://www.pixedelic.com/plugins/camera/:
从Camera 1.3.0开始,您可以通过以下方式使用回调获取当前滑块的索引:
onLoaded: function(){ var ind = t.find('.camera_target .cameraSlide.cameranext').index(); }
在onLoaded
或onStartTransition
函数中,您可以根据刚切换到的幻灯片,设置要在页面上任意位置定位的div的文本。
我创建了一个jsFiddle来展示您如何做这样的事情,但是
基本上,代码逻辑如下所示:
$('#camera_wrap_3').camera({
// camera setup here
onLoaded: function(){
var slide = $('.camera_target .cameraSlide.cameranext').index();
if(slide == 1){
$('#textbox').text('1980');
} else if (slide == 2){
$('#textbox').text('2008');
} else if(slide == 3) {
$('#textbox').text('2009');
}
}
});
希望这对将来偶然发现此问题的人有所帮助!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句