lazy loading is okay :)
This commit is contained in:
parent
c64027cc35
commit
8b5713c059
4 changed files with 71 additions and 51 deletions
|
@ -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
|
||||||
|
|
107
index.php
107
index.php
|
@ -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 . "&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 . "&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 . "&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
6
js/lazy.js
Normal 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);
|
|
@ -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" />
|
||||||
|
|
Loading…
Reference in a new issue