Ich habe einen Schieberegler (Flexslider), mit dem ich Bilder in der unten gezeigten Form anzeigen kann. Ich habe den Schieberegler so optimiert, dass er Bilder (die mit Zahlen benannt sind, z. B. 12364, 50046) dynamisch aus extrahiert ein bestimmtes Verzeichnis basierend auf seinen Namen.

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

Code zum Extrahieren der Bilder:

        <?php
function get_slide_images($folder, $images_per_slide = 10, $starts_with = '')
{

    $slide_images = false;

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

    // Implode the extensions array into a string:
    $extensions = implode(',', $extensions);

    if (file_exists($folder)) {

        // Get all the files with a valid extension in $folder:
        // (optionally filtered by $starts_with)
        foreach (glob($folder.'/{'.$starts_with.'}*.{'.$extensions.'}', GLOB_BRACE) as $filename) {
            $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";
        }

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

    }

    return $slide_images;
}

?>

        <div id="logo" class="logo" ><img src="logo.png"/></div>
        <p class="custom-class"><a href="">Go to the main website</a></p>

        <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">
  <?php


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

/**
* 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>";

}

?>

  </ul>
</div>
            </div>
        </div>

Nun, das Problem ist, dass ich den ursprünglichen Schieberegler (vor der Optimierung) mit "fancybox" verbunden habe, um Miniaturansichten und versteckte Bilder anzuzeigen. Allerdings habe ich jetzt keine Ahnung, wie ich es mit Bildern verbinden soll, die mit PHP extrahiert werden.

Code der Fancybox. JSFIDDLE:http: //jsfiddle.net/ny9ytae5/2

Case: In dem Verzeichnis images (aus dem ich die Bilder extrahiere) habe ich Bilder, die in Zahlen benannt sind (zB: 54236), und für jedes Bild gibt es einen entsprechenden Ordner mit demselben Namen (zB: für Bild 54236) einen Ordner 54236). Der Inhalt des Ordners 54236 besteht aus den Miniaturansichten, die mit dem Image 54236 verbunden werden müsse