lazy loading is okay :)

This commit is contained in:
Tom Canac 2014-01-30 12:29:34 +01:00
parent c64027cc35
commit 8b5713c059
4 changed files with 71 additions and 51 deletions

View file

@ -27,7 +27,7 @@ $sorting_folders = "name"; // Sort folders by: [name][date]
$sorting_files = "name"; // Sort files by: [name][date][size] $sorting_files = "name"; // Sort files by: [name][date][size]
$sortdir_folders = "ASC"; // Sort direction of folders: [ASC][DESC] $sortdir_folders = "ASC"; // Sort direction of folders: [ASC][DESC]
$sortdir_files = "ASC"; // Sort direction of files: [ASC][DESC] $sortdir_files = "ASC"; // Sort direction of files: [ASC][DESC]
$lazyload = 1; // 0 = pagination, 1 = display all pictures on one page. $lazyload = 0; // 0 = pagination, 1 = display all pictures on one page.
//LANGUAGE STRINGS //LANGUAGE STRINGS
$label_home = "Home"; //Name of home link in breadcrumb navigation $label_home = "Home"; //Name of home link in breadcrumb navigation

View file

@ -59,7 +59,7 @@ $comment = "";
//----------------------- //-----------------------
if (!function_exists('exif_read_data') && $display_exif == 1) { if (!function_exists('exif_read_data') && $display_exif == 1) {
$display_exif = 0; $display_exif = 0;
$messages = "Error: PHP EXIF is not available. Set $display_exif = 0; in config.php to remove this message"; $messages = "Error: PHP EXIF is not available. Set $display_exif = 0; in config.php to remove this message";
} }
//----------------------- //-----------------------
@ -78,7 +78,7 @@ function padstring($name, $length) {
global $label_max_length; global $label_max_length;
if (!isset($length)) $length = $label_max_length; if (!isset($length)) $length = $label_max_length;
if (strlen($name) > $length) { if (strlen($name) > $length) {
return substr($name,0,$length) . "..."; return substr($name,0,$length) . "...";
} else return $name; } else return $name;
} }
function getfirstImage($dirname) { function getfirstImage($dirname) {
@ -100,30 +100,30 @@ function getfirstImage($dirname) {
function readEXIF($file) { function readEXIF($file) {
$exif_data = ""; $exif_data = "";
$exif_idf0 = exif_read_data ($file,'IFD0' ,0 ); $exif_idf0 = exif_read_data ($file,'IFD0' ,0 );
$emodel = $exif_idf0['Model']; $emodel = $exif_idf0['Model'];
$efocal = $exif_idf0['FocalLength']; $efocal = $exif_idf0['FocalLength'];
list($x,$y) = split('/', $efocal); list($x,$y) = split('/', $efocal);
$efocal = round($x/$y,0); $efocal = round($x/$y,0);
$exif_exif = exif_read_data ($file,'EXIF' ,0 ); $exif_exif = exif_read_data ($file,'EXIF' ,0 );
$eexposuretime = $exif_exif['ExposureTime']; $eexposuretime = $exif_exif['ExposureTime'];
$efnumber = $exif_exif['FNumber']; $efnumber = $exif_exif['FNumber'];
list($x,$y) = split('/', $efnumber); list($x,$y) = split('/', $efnumber);
$efnumber = round($x/$y,0); $efnumber = round($x/$y,0);
$eiso = $exif_exif['ISOSpeedRatings']; $eiso = $exif_exif['ISOSpeedRatings'];
$exif_date = exif_read_data ($file,'IFD0' ,0 ); $exif_date = exif_read_data ($file,'IFD0' ,0 );
$edate = $exif_date['DateTime']; $edate = $exif_date['DateTime'];
if (strlen($emodel) > 0 OR strlen($efocal) > 0 OR strlen($eexposuretime) > 0 OR strlen($efnumber) > 0 OR strlen($eiso) > 0) $exif_data .= "::"; if (strlen($emodel) > 0 OR strlen($efocal) > 0 OR strlen($eexposuretime) > 0 OR strlen($efnumber) > 0 OR strlen($eiso) > 0) $exif_data .= "::";
if (strlen($emodel) > 0) $exif_data .= "$emodel"; if (strlen($emodel) > 0) $exif_data .= "$emodel";
if ($efocal > 0) $exif_data .= " | $efocal" . "mm"; if ($efocal > 0) $exif_data .= " | $efocal" . "mm";
if (strlen($eexposuretime) > 0) $exif_data .= " | $eexposuretime" . "s"; if (strlen($eexposuretime) > 0) $exif_data .= " | $eexposuretime" . "s";
if ($efnumber > 0) $exif_data .= " | f$efnumber"; if ($efnumber > 0) $exif_data .= " | f$efnumber";
if (strlen($eiso) > 0) $exif_data .= " | ISO $eiso"; if (strlen($eiso) > 0) $exif_data .= " | ISO $eiso";
return($exif_data); return($exif_data);
} }
function checkpermissions($file) { function checkpermissions($file) {
global $messages; global $messages;
@ -161,7 +161,7 @@ $dirs = array();
if ($handle = opendir($currentdir)) if ($handle = opendir($currentdir))
{ {
while (false !== ($file = readdir($handle))) while (false !== ($file = readdir($handle)))
{ {
// 1. LOAD FOLDERS // 1. LOAD FOLDERS
if (is_directory($currentdir . "/" . $file)) if (is_directory($currentdir . "/" . $file))
{ {
@ -215,7 +215,7 @@ if (file_exists($currentdir ."/captions.txt"))
} }
// 3. LOAD FILES // 3. LOAD FILES
if ($file != "." && $file != ".." && $file != "folder.jpg") if ($file != "." && $file != ".." && $file != "folder.jpg")
{ {
// JPG, GIF and PNG // JPG, GIF and PNG
if (preg_match("/.jpg$|.gif$|.png$/i", $file)) if (preg_match("/.jpg$|.gif$|.png$/i", $file))
@ -223,41 +223,48 @@ if (file_exists($currentdir ."/captions.txt"))
//Read EXIF //Read EXIF
if ($display_exif == 1) $img_captions[$file] .= readEXIF($currentdir . "/" . $file); if ($display_exif == 1) $img_captions[$file] .= readEXIF($currentdir . "/" . $file);
// Read the optionnal image title and caption in html file (image.jpg --> image.jpg.html) // Read the optionnal image title and caption in html file (image.jpg --> image.jpg.html)
// Format: title::caption // Format: title::caption
// Example: My cat::My cat like to <i>roll</i> on the floor. // Example: My cat::My cat like to <i>roll</i> on the floor.
// If file is not provided, image filename will be used instead. // If file is not provided, image filename will be used instead.
checkpermissions($currentdir . "/" . $file); checkpermissions($currentdir . "/" . $file);
$img_captions[$file] = $file; $img_captions[$file] = $file;
if (is_file($currentdir.'/'.$file.'.html')) { $img_captions[$file] = $file.'::'.htmlspecialchars(file_get_contents($currentdir.'/'.$file.'.html'),ENT_QUOTES); } if (is_file($currentdir.'/'.$file.'.html')) { $img_captions[$file] = $file.'::'.htmlspecialchars(file_get_contents($currentdir.'/'.$file.'.html'),ENT_QUOTES); }
if ($lazyload) {
$files[] = array ( $files[] = array (
"name" => $file, "name" => $file,
"date" => filemtime($currentdir . "/" . $file), "date" => filemtime($currentdir . "/" . $file),
"size" => filesize($currentdir . "/" . $file), "size" => filesize($currentdir . "/" . $file),
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>"); "html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
} else {
$files[] = array (
"name" => $file,
"date" => filemtime($currentdir . "/" . $file),
"size" => filesize($currentdir . "/" . $file),
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
}
} }
// Other filetypes // Other filetypes
$extension = ""; $extension = "";
if (preg_match("/.pdf$/i", $file)) $extension = "PDF"; // PDF if (preg_match("/.pdf$/i", $file)) $extension = "PDF"; // PDF
if (preg_match("/.zip$/i", $file)) $extension = "ZIP"; // ZIP archive if (preg_match("/.zip$/i", $file)) $extension = "ZIP"; // ZIP archive
if (preg_match("/.rar$|.r[0-9]{2,}/i", $file)) $extension = "RAR"; // RAR Archive if (preg_match("/.rar$|.r[0-9]{2,}/i", $file)) $extension = "RAR"; // RAR Archive
if (preg_match("/.tar$/i", $file)) $extension = "TAR"; // TARball archive if (preg_match("/.tar$/i", $file)) $extension = "TAR"; // TARball archive
if (preg_match("/.gz$/i", $file)) $extension = "GZ"; // GZip archive if (preg_match("/.gz$/i", $file)) $extension = "GZ"; // GZip archive
if (preg_match("/.doc$|.docx$/i", $file)) $extension = "DOCX"; // Word if (preg_match("/.doc$|.docx$/i", $file)) $extension = "DOCX"; // Word
if (preg_match("/.ppt$|.pptx$/i", $file)) $extension = "PPTX"; //Powerpoint if (preg_match("/.ppt$|.pptx$/i", $file)) $extension = "PPTX"; //Powerpoint
if (preg_match("/.xls$|.xlsx$/i", $file)) $extension = "XLXS"; // Excel if (preg_match("/.xls$|.xlsx$/i", $file)) $extension = "XLXS"; // Excel
if ($extension != "") if ($extension != "")
{ {
$files[] = array ( $files[] = array (
"name" => $file, "name" => $file,
"date" => filemtime($currentdir . "/" . $file), "date" => filemtime($currentdir . "/" . $file),
"size" => filesize($currentdir . "/" . $file), "size" => filesize($currentdir . "/" . $file),
"html" => "<li><a href='" . $currentdir . "/" . $file . "' title='$file'><em-pdf>" . padstring($file, 20) . "</em-pdf><span></span><img src='" . GALLERY_ROOT . "images/filetype_" . $extension . ".png' width='$thumb_size' height='$thumb_size' alt='$file' /></a></li>"); "html" => "<li><a href='" . $currentdir . "/" . $file . "' title='$file'><em-pdf>" . padstring($file, 20) . "</em-pdf><span></span><img src='" . GALLERY_ROOT . "images/filetype_" . $extension . ".png' width='$thumb_size' height='$thumb_size' alt='$file' /></a></li>");
} }
} }
} }
closedir($handle); closedir($handle);
} else die("ERROR: Could not open ".htmlspecialchars(stripslashes($currentdir))." for reading!"); } else die("ERROR: Could not open ".htmlspecialchars(stripslashes($currentdir))." for reading!");
@ -292,7 +299,7 @@ if (sizeof($files) > 0)
//----------------------- //-----------------------
// OFFSET DETERMINATION // OFFSET DETERMINATION
//----------------------- //-----------------------
if (!isset($_GET["page"])) $_GET["page"] = 1; if (!isset($_GET["page"])) $_GET["page"] = 1;
$offset_start = ($_GET["page"] * $thumbs_pr_page) - $thumbs_pr_page; $offset_start = ($_GET["page"] * $thumbs_pr_page) - $thumbs_pr_page;
if (!isset($_GET["page"])) $offset_start = 0; if (!isset($_GET["page"])) $offset_start = 0;
$offset_end = $offset_start + $thumbs_pr_page; $offset_end = $offset_start + $thumbs_pr_page;
@ -396,9 +403,9 @@ $messages = "<div id=\"topbar\">" . $messages . " <a href=\"#\" onclick=\"docume
$comment_filepath = $currentdir . $file . "/comment.html"; $comment_filepath = $currentdir . $file . "/comment.html";
if (file_exists($comment_filepath)) if (file_exists($comment_filepath))
{ {
$fd = fopen($comment_filepath, "r"); $fd = fopen($comment_filepath, "r");
$comment = utf8_encode(fread($fd,filesize ($comment_filepath))); // utf8_encode to convert from iso-8859 to UTF-8 $comment = utf8_encode(fread($fd,filesize ($comment_filepath))); // utf8_encode to convert from iso-8859 to UTF-8
fclose($fd); fclose($fd);
} }
//PROCESS TEMPLATE FILE //PROCESS TEMPLATE FILE
if(GALLERY_ROOT != "") $templatefile = GALLERY_ROOT . "templates/integrate.html"; if(GALLERY_ROOT != "") $templatefile = GALLERY_ROOT . "templates/integrate.html";

6
js/lazy.js Normal file
View file

@ -0,0 +1,6 @@
/*!
[be]Lazy.js - v1.1.3 - 2014.01.21
A lazy loading and multi-serving image script
(c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
*/
var Blazy=function(c,h){function g(b){if(!h.querySelectorAll){var d=h.createStyleSheet();h.querySelectorAll=function(b,a,c,e,g){g=h.all;a=[];b=b.replace(/\[for\b/gi,"[htmlFor").split(",");for(c=b.length;c--;){d.addRule(b[c],"k:v");for(e=g.length;e--;)g[e].currentStyle.k&&a.push(g[e]);d.removeRule(0)}return a}}a=b||{};a.src=a.src||"data-src";a.multi=a.multi||!1;a.error=a.error||!1;a.offset=a.offset||100;a.success=a.success||!1;a.selector=a.selector||".b-lazy";a.separator=a.separator||"|";a.container=a.container?h.querySelectorAll(a.container):!1;a.errorClass=a.errorClass||"b-error";a.successClass=a.successClass||"b-loaded";q=a.src;u=1<c.devicePixelRatio;e=v(w,20);r=v(x,50);x();l(a.multi,function(b){if(b.width>=c.screen.width)return q=b.src,!1});y()}function w(){for(var b=0;b<k;b++){var d=m[b],t=-1!==(" "+d.className+" ").indexOf(" "+a.successClass+" "),f=d.getBoundingClientRect(),c=z+a.offset;if(0<=f.left&&f.right<=A+a.offset&&(0<=f.top&&f.top<=c||f.bottom<=c&&f.bottom>=0-a.offset)||t)t||B(d),m.splice(b,1),k--,b--}0===k&&g.prototype.destroy()}function B(b){if(0<b.offsetWidth&&0<b.offsetHeight){var d=b.getAttribute(q)||b.getAttribute(a.src);if(d){var d=d.split(a.separator),c=d[u&&1<d.length?1:0],d=new Image;l(a.multi,function(a){b.removeAttribute(a.src)});b.removeAttribute(a.src);d.onerror=function(){a.error&&a.error(b,"invalid");b.className=b.className+" "+a.errorClass};d.onload=function(){"img"===b.nodeName.toLowerCase()?b.src=c:b.setAttribute("style",'background-image: url("'+c+'");');b.className=b.className+" "+a.successClass;a.success&&a.success(b)};d.src=c}else a.error&&a.error(b,"missing"),b.className=b.className+" "+a.errorClass}}function C(b){b=h.querySelectorAll(b);for(var a=k=b.length;a--;m.unshift(b[a]));}function x(){var b=h.documentElement;z=c.innerHeight||b.clientHeight;A=c.innerWidth||b.clientWidth}function y(){C(a.selector);s&&(s=!1,a.container&&l(a.container,function(b){n(b,"scroll",e)}),n(c,"scroll",e),n(c,"resize",e),n(c,"resize",r));w()}function n(b,a,c){b.attachEvent?b.attachEvent&&b.attachEvent("on"+a,c):b.addEventListener(a,c,!1)}function p(b,a,c){b.detachEvent?b.detachEvent&&b.detachEvent("on"+a,c):b.removeEventListener(a,c,!1)}function l(b,a){if(b&&a)for(var c=b.length,f=0;f<c&&!1!==a(b[f],f);f++);}function v(a,c){var e=0;return function(){var f=+new Date;f-e<c||(e=f,a.apply(this,arguments))}}var q,a,A,z,u,s=!0,k=0,m=[],e,r;g.prototype.revalidate=function(){y()};g.prototype.load=function(b){-1===(" "+b.className+" ").indexOf(" "+a.successClass+" ")&&B(b)};g.prototype.destroy=function(){a.container&&l(a.container,function(a){p(a,"scroll",e)});p(c,"scroll",e);p(c,"resize",e);p(c,"resize",r);k=0;m.length=0;s=!0};return g}(window,document);

View file

@ -7,6 +7,13 @@
<title><% title %></title> <title><% title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link> <link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
<script src="<% gallery_root %>js/lazy.js"></script>
<script>
window.addEventListener('load', function(){
var bLazy = new Blazy;
}, false);
</script>
<script src="<% gallery_root %>js/mootools.js"></script> <script src="<% gallery_root %>js/mootools.js"></script>
<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script> <script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />