html - Connecting thumbnails to images extracted using php

Question

I have a slider (flexslider) that i'm using to display images in the form shown in the below jsfiddle... I optimized the slider so that it extracts images (which are named using numbers e.g:12364, 50046) dynamically from a certain directory based on its names.

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

Code for extracting the images:

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

Now the problem is that when i had the original slider (before optimizing it) i connected it to "fancybox" to display thumbnails and hidden images. However now i have no idea on how to connect it to images that are being extracted using php.

Code of the Fancybox. JSFIDDLE: http://jsfiddle.net/ny9ytae5/2/

Case: inside the directory images (which i'm extracting the images from) i have images that are named in numbers (e.g:54236), and for each image an equivalent folder with the same name (e.g: for image 54236 there is a folder 54236). The content of the folder 54236 are the thumbnails that needs to be connected to the image 54236. Any help?

Answer 1

You have to edit your php code, where you generate hmtl for images to the code below:

$slide_images[$filename] = '<a class="fancybox" data-fancybox-group="slide-N">';
$slide_images[$filename] .= "<img src='{$filename}' alt='{$filename}' />";
$slide_images[$filename] .= '</a>';

So you'll get exact markup, needed for fancybox, but you have to set fancybox-data-group attribute to be equal for all images on one slide (replace "slide-N" to your actual "slide-1" etc), when fancybox will show thumbs for images on your current slide. Here is jsfiddle example what you'll get after it.