I need to build an image-gallery which:
- displays thumbnails auto-generated from large-image-directory, (done.)
- has no browser-default scrollbars (replaced by Perfect Scrollbar), (done.)
- has images in columns in equal width thumbnails, (done.)
- displays new images in large-directory first, (done.)
- lazy loading of thumbnails. (problem!)
- has smooth scrolling like on smart phones (not reached because of 5).
A potential endless display of blocks of thumbnails (links to another page for the large-images) or as much as someone wants to scroll down. Gallery will have at least 1000-2000 thumbnail-links.
I understand that loading so many thumbnails at once might crash the browser and that's why I was trying to get the images to load lazilym, but for the life of me, I cannot get any lazy load plugin to work for my website. I tried it after removing perfect-scollbar from code but still no cigar. After a lot of searching I have to come to a conclusion that lazy load "might" not always work.
So I figure that I have to limit the number of thumbnails being loaded on the page to lets say 30. But at the same time, I want a link which will load another 30 images on the same page without reloading the page...
I am producing the code under this as it is before adding lazy load image plugin.
<head>
<link href="src/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.mousewheel.js"></script>
<script src="src/perfect-scrollbar.js"></script>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar({ wheelSpeed: 50, wheelPropagation: true, minScrollbarLength: 20 });
});
</script>
</head>
<body>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 100%; height: 100%; overflow: hidden; }
.contentHolder .content {}
.spacer { text-align:center }
html, body {
margin: 0px;
padding: 0px;
background-color:black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.imagecontainer { width:100%; }
#videos { width:100%; height:120px; }
#photos {
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap:0px;
-moz-column-count: 5;
-moz-column-gap:0px;
column-count:5;
column-gap:0px;
float:left;
}
#photos img {
/* Just in case there are inline attributes */
width: 99% !important;
height: auto !important;
opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-backface-visibility: hidden;
}
#photos img:hover {
width: 100% !important;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<div style="position:fixed; z-index:4; width:100%; background-color:rgba(100,100,100,0.5)">Simple Menu Bar-Currently empty.</div>
<div id="Default" class="contentHolder">
<div class="content">
<section id="photos">
<?php
/* Get Directory with Dates Last Modified */
function getimageswithdates(){
$directory="preload-images/";
$sortOrder="newestFirst";
$results = array();
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file != '.' && $file != '..' && $file != "robots.txt" && $file != ".htaccess"){
$currentModified = filectime($directory."/".$file);
$file_names[] = $file;
$file_dates[] = $currentModified;
}
}
closedir($handler);
//Sort the date array by preferred order
if ($sortOrder == "newestFirst"){
arsort($file_dates);
} else {
asort($file_dates);
}
//Match file_names array to file_dates array
$file_names_Array = array_keys($file_dates);
foreach ($file_names_Array as $idx => $name) $name=$file_names[$name];
$file_dates = array_merge($file_dates);
//Loop through dates array, save list to array and echo the list
$filelist = array();
$i = 0;
foreach ($file_dates as $file_dates){
$date = $file_dates;
$j = $file_names_Array[$i];
$file = $file_names[$j];
$i++;
$filelist[] = $file;
echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
<img src="preload-images-thumbs/'.$file.'" /></a>';
}
echo '</section> </div>';
}
/** settings **/
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-images-thumbs/';
$thumbs_width = 200;
/* function: generates thumbnail */
function make_thumb($src,$dest,$desired_width) {
/* read the source image */
$source_image = imagecreatefromjpeg($src);
$width = imagesx($source_image);
$height = imagesy($source_image);
/* find the "desired height" of this thumbnail, relative to the desired width */
$desired_height = floor($height*($desired_width/$width));
/* create a new, "virtual" image */
$virtual_image = imagecreatetruecolor($desired_width,$desired_height);
/* copy source image at a resized size */
imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);
/* create the physical thumbnail image to its destination */
imagejpeg($virtual_image,$dest);
}
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
if(!file_exists($thumbnail_image)) {
$extension = get_file_extension($thumbnail_image);
if($extension) { make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width); }
}
}
}
else { }
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file; }
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
echo getimageswithdates();
?>
</body>
</html>
--------------------- EDIT -------------------
The foreach loop
$filelist = array();
$i = 0;
foreach ($file_dates as $file_dates){
$date = $file_dates;
$j = $file_names_Array[$i];
$file = $file_names[$j];
$i++;
$filelist[] = $file;
echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
<img src="preload-images-thumbs/'.$file.'" /></a>';
}
Can the loop pause if i == 30, then resume on click, and cycle in 30s?
Your approach is wrong, do XHR (ajax) to achieve this, send the appropriate parameters from javascript to the php so it loops in specific range that you want.