我正在尝试使用PHP关联数组将文本和图像的不同值回显到HTML,以用于同一页面上jQuery幻灯片的不同实例。这是HTML:
<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>This is the text!</p></div>
</div>
<div class='mosaic-image'><img src='imgs/the-img.png'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> `
我为每种类型的幻灯片编写了数组,其中包含每张幻灯片的文字和图片,以下是示例:
$my_content = array(
'image1.png' => 'image1 text!',
'image2.png' => 'image2 text!'
);
然后我写了一个函数,其中包含幻灯片类别和内容的参数:
function gallery_content($content) {
foreach ( $content as $img => $txt ) {
echo "<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
我称之为:gallery_content($my_content);
并且效果非常好。但是当我尝试再次为另一组值调用它时,只有第一个实例似乎有效。我尝试直接使用数组而不是变量作为参数并为每个幻灯片显示一个单独的函数,但不断得到相同的结果。
为什么不能多次调用该函数?提前谢谢。
答案 0 :(得分:1)
我的猜测是PHP正在完成它的工作。检查输出文档的来源,您应该看到正确数量的画廊)。我怀疑类gallery
的CSS规则(例如绝对定位它的CSS规则)只会导致一个库可见。如果您可以使用内联CSS(通常不可接受),您可以让PHP根据图库编号添加自定义位置值(例如顶部):
function gallery_content($content) {
$num = 0;
foreach ( $content as $img => $txt ) {
echo "<div class='slide' style='top: ".(100 + 50*$num)."px'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
上面的例子给出了第一个gallery元素的顶部100px(100 + 50 * 0),第二个元素的顶部是150px,顶部是200px,依此类推。您也可以使用一些CSS3和新的calc()
功能代替此功能,但CSS3选择器是实验性的,在某些旧版浏览器中不受支持。使用PHP和内联样式将是您最安全的选择。
答案 1 :(得分:0)
查看最终页面(HTML)上生成的源代码,以判断PHP是否正常工作。我认为你得到的“galaries”(DIV)可能具有jQuery激活它们的相同ID或其他属性,因此只有一个正在运行(第一个),第二个没有运行。 / p>
希望有所帮助。