Thank you all for replying.
I created a working script that loads in all the images automatically.
<div id="mygallery">
<?php
$folder_path = 'images/full/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$file_path_thumb = $folder_path.$thumb;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
$files = substr($file, 0, strrpos($file, '.'));
if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<a data-fancybox="gallery" href="<?php echo $file_path; ?>"><img src="images/thumb/<?php echo $files . "_thumb.". $extension; ?>"></a>
<?php
}
}
}
else
{
echo "the folder was empty !";
}
closedir($folder);
?>
</div>
This PHP is in #mygallery
for use in the justifiedGallery.js
so the images are loaded in all
responsive and clean next to each other.
Two problems that are happening now are that the images are being showed too early,
because thejustifiedGallery.js
is too late and jumps in 1 sec after page reload so the user will
see the image stacked below each other for a short time before they get in line.
The javascript
is at the bottom of the page and called right before the body
end tag.
<script>
$(document).ready(function(){
$('#mygallery').justifiedGallery({
lastRow : 'center',
rowHeight : 170,
margins : 4,
border: 3,
randomize: true
});
$(".menuButton").click(function(){
$("#main-navbar").slideToggle();
});
});
</script>
The second problem is a weird one. I can click all the images and they open in fancybox
perfectly.
But, if I click around my image gallery, sometimes I get the message: the requested image could not be loaded, please try again later
. Another try, results in a perfect opening image…
So, is there something wrong with my PHP maybe? If so, what could this be?