Tengo un control deslizante (control deslizante flexible) que estoy usando para mostrar imágenes en la forma que se muestra en el siguiente jsfiddle ... Optimicé el control deslizante para que extraiga imágenes (que se nombran usando números, por ejemplo: 12364, 50046) dinámicamente desde un cierto directorio basado en sus nombres.

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

Código para extraer las imágenes:

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

Ahora el problema es que cuando tuve el control deslizante original (antes de optimizarlo) lo conecté a "fancybox" para mostrar miniaturas e imágenes ocultas. Sin embargo, ahora no tengo idea de cómo conectarlo a las imágenes que se extraen con php.

Código de la Fancybox. JSFIDDLE:http://jsfiddle.net/ny9ytae5/2/

Caso: dentro de las imágenes del directorio (de donde estoy extrayendo las imágenes) tengo imágenes que se nombran en números (por ejemplo: 54236), y para cada imagen una carpeta equivalente con el mismo nombre (por ejemplo: para la imagen 54236 hay un carpeta 54236). El contenido de la carpeta 54236 son las miniaturas que deben conectarse a la imagen 54236. ¿Alguna ayuda?