ディレクトリから複数のスライド可能な画像ギャラリーを作成するにはどうすればよいですか？ （スリックスライダー）

Question

私は、私の友人のための相対的に単純なHTML/CSS/PHPのウェブサイトを作った。しかし今、彼はギャラリーでイベントの写真を見せることができるページを作りたいと思っています。

私はすでにこのオンラインのコードを探していますが、今のところ、そのディレクトリ内のすべての画像が表示されますが、イベントごとに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>"; 
       } 

      ?> 

[ - EDIT - ]

は、私はすでに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>"; 
        } 
     ?> 

（勿論スライダのaditional CSSとJavaScriptを使用してとしていたコードを組み合わせることに成功したが、それは私にとっては重要ではない）

しかし、私はもう一つの問題があります...彼らはアルファベットで自動的にソートしますが、イメージを保存する日付をソートする必要がありますsが保存されます。 誰でもこれを行う方法を知っていますか？

おそらくそれは頼まれていますが、可能であれば、フォルダごとにそのフォルダ内にいくつの画像があるかを表示することもできますか？

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 
}); 

}）;あなたのケースでは

<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>"; 
      } 

     ?>