Wyodrębnianie obrazów w określony sposób

Question

Mam suwak (flexslider), który dostosowałem, aby 10 zdjęć pojawiało się na slajd. Projekt został zbudowany w taki sposób, że źródła obrazów są wstawiane ręcznie. Teraz próbuję zoptymalizować suwak, aby obrazy były pobierane dynamicznie za pomocą php. Udało mi się to zrobić, ale tylko jeden obraz pojawia się na slajdzie. Każda pomoc w tworzeniu 10 różnych obrazów pojawiających się na slajdzie?

suwak Kod: JSFIDDLE: https://jsfiddle.net/atkumqpk/1/

HTML:

<div id="menu" class="menu"> 
    <ul class="headlines"> 
     <li id="item1"> 
      <button>aaaaaaaa</button> 
     </li> 
     <li id="item2"> 
      <button>bbbbbbb</button> 
     </li> 
     <li id="item3"> 
      <button>ccccccc</button> 
     </li> 
     <li id="item4"> 
      <button>dddddddd</button> 
     </li> 
     <li id="item5"> 
      <button>eeeeeee eee.</button> 
     </li> 
     <li id="item6"> 
      <button>ffffff</button> 
     </li> 
     <li id="item7"> 
      <button>ggggggg</button> 
     </li> 
    </ul> 
</div> 
<div id="container"> 
<div id="first" class="inner-container"> 
    <div id="item11" class="item"> <a name="item11"></a> 

       <div class="flexslider"> 
    <ul class="slides"> 
    <li> 
       <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    </ul> 
</div> 
      </div> 
     </div> 

kodu PHP do ekstrakcji obrazów:

 $folder = 'images'; // chose folder 
     $extensions = array('JPG','jpg','jpeg','gif','png'); // allowed extensions 
    $slika = scandir($folder); // scan folder 
    sort($slika); // sort 
    foreach($slika as $key => $value) {  
      $get_extensions = explode(".",$value); 
      $ext = $get_extensions[count($get_extensions) - 1]; 
      if (in_array($ext, $extensions)) 
      { 
      $title = substr($value, 0,strrpos($value,'.')); // image name 
      echo "<li><img src='".$folder."/".$value."' /></li>"; 
      } 
    } 

Answer 1

Należy zwrócić tablicę na kawałki 10, na podstawie podanego folder.

function get_slide_images($folder, $images_per_slide = 10) 
{ 

    $slide_images = false; 

    if (file_exists($folder)) { 

     // valid extensions 
     $extensions = array(
      "jpg", 
      "gif", 
      "jpeg", 
      "svg", 
      "png", 
      "bmp" 
     ); 

     foreach (new DirectoryIterator($folder) as $file_key => $file) { 

      // Don't bother 
      if (!in_array($file->getExtension(), $extensions)) { 
       continue; 
      } 

      // Grab file details 
      $filename = $file->getFilename(); 
      $file_folder = $folder . "/" . $filename; 

      // Store the image to the Slide 
      $slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />"; 

     } 

     if (!empty($slide_images)) { 
      ksort($slide_images); 
      $slide_images = array_chunk($slide_images, $images_per_slide); 
     } 

    } 
    return $slide_images; 
} 

Wykorzystanie

$slider_kvp = get_slide_images("images", 10); 

echo "<pre>"; 
var_dump($slider_kvp); // This will tell you whats in our slider 
echo "</pre>"; 

/** 
* Here we are going to generate the SLIDES 
*/ 
if($slider_kvp) { 

    $slider_list_html = array(); 

    foreach($slider_kvp as $slider_key => $slide_images) { 

     $html_LI_list = ""; 
     $html_LI_list = "<li>"; 

     // Go through each image ... 
     foreach($slide_images as $image_key => $image_value) { 
      $html_LI_list .= $image_value; 
     } 

     $html_LI_list .= "</li>"; 

     $slider_list_html[$slider_key] = $html_LI_list; 

    } 

    // OUR SLIDES! 
    $rendered_slider_list_html = implode(' ', $slider_list_html); 
    echo "<ul class='slides'>{$rendered_slider_list_html}</ul>"; 

}