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: /
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: /
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: /
However I failed to make it work. Any help please?
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/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/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./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?
Share Improve this question edited Aug 4, 2015 at 0:17 PRAH 6807 silver badges19 bronze badges asked Jul 27, 2015 at 6:31 dandan 5636 silver badges19 bronze badges 1- Is there any reason that oliverpool's answer wouldn't work? It looks like it would correctly use a thumbnail as display with a link to the original image. – Glen Despaux Jr Commented Jul 30, 2015 at 16:43
2 Answers
Reset to default 9 +50In "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.
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)