在文件夹中的html页面中显示图像？

Question

因此网上有很多这样的例子脚本但是有一半不能正常工作而另一半不能完全按我的意愿行事。我尝试修改脚本等，但我不能得到我需要的东西，也许有人可以指出我正确的方向或给我一个将完成这项工作的脚本。

我的问题很简单。我在目录中有一组图像。我想在网页上显示所有这些图像，所有这些都在一组中显示。我希望脚本显示目录中的所有图像，无论更改如何。我只希望显示的jpg图像不是GIF等。最后我希望文件名显示在每个图像下面。

到目前为止，iv设法在目录中显示所有文件名，但没有过滤出jpgs而实际上没有将图像显示为图像，只列出他们的文件名。

如果有人可以帮助我，我们非常感谢您的帮助！ 这是我的一段代码

谢谢，

    <div class="clearfix">
        </div>
        <div class="row">
            <section id="projects">
            <ul id="thumbs" class="portfolio">
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="web">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/1.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/1.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 design" data-id="id-1" data-type="icon">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/2.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/2.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 photography" data-id="id-2" data-type="graphic">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/3.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/3.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="web">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/4.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/4.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 photography" data-id="id-4" data-type="web">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/5.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/5.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 photography" data-id="id-5" data-type="icon">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/6.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/6.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="web">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/7.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/7.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
                <!-- Item Project and Filter Name -->
                <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="graphic">
                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="../img/works/8.jpg">
                <span class="overlay-img"></span>
                <span class="overlay-img-thumb font-icon-plus"></span>
                </a>
                <!-- Thumb Image and Description -->
                <img src="../img/works/8.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
            </ul>
            </section>
        </div>
    </div>
</div>

Answer 1

一个非常基本的例子

<!doctype html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <meta name="language" content="en" />  
        <meta name="description" content="" />  
        <meta name="keywords" content="" />
        <style type="text/css">
            ul li {list-style: none; margin-bottom: 15px;}
            ul li img {display: block;}
            ul li span {display: block;}
        </style>
    </head>
    <body>

        <?php

        // open this directory 
        $myDirectory = opendir("images");

        // get each entry
        while($entryName = readdir($myDirectory)) {
            $dirArray[] = $entryName;
        }

        // close directory
        closedir($myDirectory);

        //  count elements in array
        $indexCount = count($dirArray);

        ?>

        <ul>

            <?php
            // loop through the array of files and print them all in a list
            for($index=0; $index < $indexCount; $index++) {
                $extension = substr($dirArray[$index], -3);
                if ($extension == 'jpg'){ // list only jpgs
                    echo '<li><img src="images/' . $dirArray[$index] . '" alt="Image" /><span>' . $dirArray[$index] . '</span>';
                }   
            }
            ?>

        </ul>   


    </body>
</html>