如何从一个目录制作多个可滑动的图片库？（光滑的滑块）

Question

我为我的一个朋友制作了一个相对简单的 html/css/php 网站。但现在他想要一个页面，我可以在其中展示画廊中的活动照片（每个活动大约 100 张照片）。

我已经在网上搜索了一些代码，我现在拥有的显示了该目录中的所有图片，但如果每个事件有 100 张照片，页面就会变得很大。

所以现在我想知道是否可以将这些照片放在滑块或类似的东西中。

           <?php 

                $dirs = glob('images/*', GLOB_ONLYDIR);
                foreach($dirs as $val) {
                    echo '<div class="gallery">';
                    echo "<a><h3><span>&raquo;</span> ".basename($val). "</h3></a>"; 
                    echo '<ul class="gallery-list">';
                $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
                foreach($files as $file) {
                    echo "<li><a href='".$file."' ><img src='" . $file . "'></a></li> \r\n";
                 }
                    echo "</ul>";
                    echo "</div>";
                } 

            ?>

[-- 编辑 --]

我设法将已有的代码与 slickslider 结合起来

        <?php 
                $dirs = glob('images/*', GLOB_ONLYDIR);
                foreach($dirs as $val) {
                    echo "<div class='gallery-wrapper'";
                    echo "<a><h3>".basename($val). "</h3></a>"; 
                    echo '<div class="slider-photos">';         
                    $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);                        
                foreach($files as $file) {
                    echo "<div class='slide'><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";    
                       }
                    echo "</div>";
                    echo "</div>";
                   } 
       ?>

（当然还有滑块的附加 CSS 和 javascript，但我认为这并不重要）

但我还有一个问题...它们会自动按字母排序，但我希望它们按我创建存储图像的文件夹的日期进行排序。有人知道怎么做吗？

可能问得太多了，但如果可能的话，我还可以显示每个文件夹中该文件夹中有多少张图片吗？

Answer 1

您只需稍微修改一下代码，然后围绕 div 对每个滑块的内容执行循环。如果您使用的是光滑的滑块 (http://kenwheeler.github.io/slick/)，那么它应该非常简单。

第一步是确保您拥有所有必需的库：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

第二步是确保初始化滑块：

$(document).ready(function(){
    $('.gallery-list').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4
});

});

第三步是使用此模板正确构建您的 html：

<div class="gallery-list">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>

在你的情况下，我认为这就是你需要的：

<?php 

            $dirs = glob('images/*', GLOB_ONLYDIR);
            foreach($dirs as $val) {
                echo '<div class="gallery">';
                echo "<a><h3><span>&raquo;</span> ".basename($val). "</h3></a>"; 
                echo '<div class="gallery-list">';
            $files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
            foreach($files as $file) {
                echo "<div><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
             }
                echo "</div>";
                echo "</div>";
            } 

        ?>

如何从一个目录制作多个可滑动的图片库？（光滑的滑块）

How can you make multiple, slideable image galleries from a directory? (Slick Slider)

html

php

slider

gallery

slick.js

如何从一个目录制作多个可滑动的图片库？ （光滑的滑块）

How can you make multiple, slideable image galleries from a directory? (Slick Slider)

html

php

slider

gallery

slick.js

如何从一个目录制作多个可滑动的图片库？（光滑的滑块）