Extract thumbnails in 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>
</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.

I was informed by stackoverflow member "JFK" that i can do this:" $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />"; could be changed into this $slide_images[$filename] = "<a class='fancybox' data-fancybox-group='thumb1' href='{$filename}'><img src='{$filename}' alt='{$filename}' /></a>"; ... the only issue is that you would be using the same image as thumbnail, which will be adding an overhead to your pageload. "

And suggested using this tutorial: http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2-create-image-thumbnails-with-php/

However I failed to make it work. Any help please?

Answer 1

In "JFK" suggestion, you should point the src property to your thumbnail image (and let the href property to the big size image)

Something like

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

Hence the thumbnail will be loaded imediately, but the big image will be loaded only when needed.

Answer 2

I think you can start with something like this

if you want to make it on the fly you simply can pass the height or width (I suggest you to calculate on the fly the other so you don't lose the proportions); if you want to cache it just save the img and check if you have the image (you can use a custom name like title-width-height.jpg and check if it exists)