我有一个php循环,可以将一些图像加载到某个滑块上:
<div id="slider" class="flexslider">
<ul class="slides">
foreach($imglist as $image) {
$caption = // I am populating this variable from the image meta data
echo '<li><img src="'.$img_folder.$image.'">';
}
</ul>
</div>
<div id="caption-block" class="myNewDiv">
<p>
echo $caption;
</p>
</div>
我还从图像中提取元数据并加载每个元数据。我的问题与我想在循环所在的区域之外加载一个单独的标题这一事实有关。你可以推断,我编写的代码不起作用,因为$ caption没有动态加载,因为它不在循环内。
是否可以使用php动态填充单独div上的$ caption?如果是这样,最好的方法是什么?
答案 0 :(得分:1)
您可以使用javascript使用Flexslider回调动态地将标题注入#caption-block
div。在这种情况下,您可以将标题存储在img标记的data属性中,然后使用Flexslider中的自定义函数将其拉出:callback。这是HTML / PHP:
<?php echo '<li><img src="'.$img_folder.$image.'" data-caption="'.$caption.'">'; ?>
在Flexslider之前:回调:
before: function(slider){
// set current slide
var currSlide = slider.slides.eq(slider.animatingTo + 1);
var caption = $(currSlide).find("img").data('caption');
$('#caption-block p').text(caption);
}