Question

我正在尝试将83张图片循环到灯箱中，因此我不必将它们全部添加到HTML中。但是，当我用PHP循环它时，我得到了一个图像 - 破坏图像的视图（不完全是我想要的，我希望它们显示1个图像，当点击时显示灯箱中的所有其他图像，但那并不是真的很紧急现在）。当我检查元素时，他们得到了这条路：

<img src="afbeeldingen/slides/dias/afbeeldingen/slides/thumbs">

所以我认为循环中出了问题，但我不知道是什么。

当我点击第一张图片时，灯箱可以正常工作，但不适用于其他图片。

这些图片是在名为Dia1.JPG到Dia83.JPG的afbeeldingen / slide / dias中，他们在路径中有缩略图：afbeeldingen / slides / thumbs，名为thumbDia1.jpg，来自thumbDia83.jpg

这是我目前的代码：

$dirname = 'afbeeldingen/slides/dias/';
$thumbs = 'afbeeldingen/slides/thumbs';
$images = scandir($dirname);
$ignore = Array(".", "..");

foreach($images as $curimg){
    if(!in_array($curimg, $ignore)) {
        echo '<ul id="auto-loop" class="gallery">
                <li data-src="'.$dirname.$curimg.'"> 
                    <a href="#">
                    <img src="'.$dirname.$thumbs.'" />
                    </a> 
                </li>
            </ul>';
    }
}

这是适用于灯箱的普通html，但我不想为83张图片执行此操作：

<ul id="auto-loop" class="gallery">
    <li data-src="afbeeldingen/slides/dias/Dia1.JPG"> 
        <a href="#">
        <img src="afbeeldingen/slides/dias/dia1thumb.jpg" />
        </a> 
    </li>
    <li data-src="img2.jpg" > 
        <a href="#">
        <img src="thumb2.jpg" />
        </a> 
    </li>
    <li data-src="img3.jpg"> 
        <a href="#">
        <img src="thumb3.jpg" />
        </a> 
    </li>
    <li data-src="img4.jpg" > 
        <a href="#">
        <img src="thumb4.jpg" />
        </a> 
    </li>
</ul>

有人能以正确的方式帮助我吗？

谢谢。

Answer 1

您要在foreach中添加ul标记，该标记会在其中生成多个包含单个标记的标记，因此，请将其置于循环之外，如下所示：

...
//store your <ul> in a variable
$ul = '<ul id="auto-loop" class="gallery">';
foreach($images as $curimg){
    if(!in_array($curimg, $ignore)) {
        //add li's to your ul
        $ul .='<li data-src="'.$dirname.$curimg.'"> 
                    <a href="#">
                    <img src="'.$dirname.$thumbs.'" />
                    </a> 
                </li>';
    }
}
//finally close ul tag
$ul .='</ul>';
echo $ul; //display the <ul> tag

灯箱中的图像循环无法正常工作

1 个答案: