lazy loading finished

index.php

@@ -236,13 +236,13 @@ if (file_exists($currentdir ."/captions.txt"))
 			  				"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 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>");
+				  			"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><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>");
+				  			"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><img  src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
 						}
 		  			}
 					// Other filetypes

templates/board.html

@@ -13,7 +13,6 @@
 				var bLazy = new Blazy;
 			}, false);
 		</script>
-		
 		<script src="<% gallery_root %>js/mootools.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" />

templates/rounded.html

@@ -7,190 +7,209 @@
 		<title><% title %></title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<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/mediaboxAdv-1.3.4b.js"></script>
 		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
-
+		<style type="text/css">
-	<style type="text/css">
+			html {
-		html {
+				font-size:62.5%;
-			font-size:62.5%;
-		}
-		.clear {
-			clear:both;
-		}
-		body {
-			width:100%;
-			margin:0;
-			padding:0;
-			font-family:Helvetica,Arial,sans-serif;
-			font-size:1.5rem;
-			color:#FFF;
-			background:#3B3A37;
-		}
-		a {
-			text-decoration:none;
-			font-weight:bold;
-			color:#FFF;
-		}
-		h1 {
-			margin:20px 0 0;
-			font-family:Georgia,Lucida,serif;
-			font-style:italic;
-		}
-		h1 a {
-			color:#E63D24;
-		}
-		body > header {
-			padding:1px;
-			text-align:center;
-		}
-		#container,
-		#innerheader {
-			margin:0 auto;
-			max-width:<% gallery_width %>;
-		}
-		#container header {
-			padding:2rem 0;
-		}
-		img {
-			border:none;
-		}
-		nav {
-			padding-top:15px;
-			font-size:1.3em;
-		}
-		body > nav {
-			text-align:center;
-		}
-		#folder_comment {
-			margin-bottom:10px;
-		}
-		#folder_comment a {
-			text-decoration:none;
-			color:#FFCC11;
-		}
-		#gallery {
-			margin:0;
-			padding:0;
-			list-style:none;
-		}
-		#gallery li,
-		#gallery li img {
-			border-radius:4px;
-		}
-		#gallery li {
-			float:left;
-			position:relative;
-			margin:.5%;
-		}
-		#gallery li img {
-			width:100%;
-			border-radius:100%;
-			-webkit-box-shadow:0 0 2px -1px #000;
-			box-shadow:0 0 2px -1px #000;
-		}
-		#gallery li:hover img {
-			-webkit-box-shadow:0 0 5px 0 #000;
-			box-shadow:0 0 5px 0 #000;
-		}
-		#gallery li:hover img,
-		#gallery li img,
-		#gallery li em,
-		#gallery li:hover em {
-			-webkit-transition:all .2s ease-in;
-			-ms-transition:all .2s ease-in;
-			-o-transition:all .2s ease-in;
-			transition:all .2s ease-in;
-		}
-		#gallery em {
-			position:absolute;
-			top:-1px;
-			bottom:-1px;
-			zoom:1;
-			width:100%;
-			margin:-0.5px 0 0 -0.5px;
-			padding:40% 0;
-			border:1px solid #000;
-			border-radius:100%;
-			text-align:center;
-			font-family:Georgia,Lucida,serif;
-			font-size:2.5rem;
-			font-style:italic;
-			color:#FFF;
-			opacity:0;
-			background:#000;
-			filter:alpha(opacity=0);
-		}
-		#gallery li:hover em {
-			zoom:1;
-			opacity:1;
-			filter:alpha(opacity=1);
-		}
-		footer {
-			margin:25px 0;
-			text-align:center;
-		}
-		footer a {
-			text-decoration:none;
-			color:#666;
-		}
-		/*----responsive----*/
-		#gallery li {
-			width:24%;
-			height:0;
-			padding-bottom:24%;
-		}
-		@media(max-width:1000px) {
-			#gallery li {
-				width:32%;
-				padding-bottom:32%;
 			}
-		}
+			.clear {
-		@media(max-width:800px) {
+				clear:both;
-			#gallery li {
-				width:48%;
-				padding-bottom:48%;
 			}
-		}
+			body {
-		@media(max-width:450px) {
-			#gallery li {
 				width:100%;
-				padding-bottom:100%;
+				margin:0;
+				padding:0;
+				font-family:Helvetica,Arial,sans-serif;
+				font-size:1.5rem;
+				color:#FFF;
+				background:#3B3A37;
 			}
-		}
+			a {
-	</style>
+				text-decoration:none;
-</head>
+				font-weight:bold;
+				color:#FFF;
+			}
+			h1 {
+				margin:20px 0 0;
+				font-family:Georgia,Lucida,serif;
+				font-style:italic;
+			}
+			h1 a {
+				color:#E63D24;
+			}
+			body > header {
+				padding:1px;
+				text-align:center;
+			}
+			#container,
+			#innerheader {
+				margin:0 auto;
+				max-width:<% gallery_width %>;
+			}
+			#container header {
+				padding:2rem 0;
+			}
+			img {
+				border:none;
+			}
+			nav {
+				padding-top:15px;
+				font-size:1.3em;
+			}
+			body > nav {
+				text-align:center;
+			}
+			#folder_comment {
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				text-decoration:none;
+				color:#FFCC11;
+			}
+			#gallery {
+				margin:0;
+				padding:0;
+				list-style:none;
+			}
+			#gallery li,
+			#gallery li img {
+				border-radius:4px;
+			}
+			#gallery li {
+				float:left;
+				position:relative;
+				margin:.5%;
+			}
+			#gallery li img {
+				width:100%;
+				border-radius:100%;
+				-webkit-box-shadow:0 0 2px -1px #000;
+				box-shadow:0 0 2px -1px #000;
+			}
+			#gallery li:hover img {
+				-webkit-box-shadow:0 0 5px 0 #000;
+				box-shadow:0 0 5px 0 #000;
+			}
+			#gallery li:hover img,
+			#gallery li img,
+			#gallery li em,
+			#gallery li:hover em {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery em {
+				position:absolute;
+				top:-1px;
+				bottom:-1px;
+				zoom:1;
+				width:100%;
+				margin:-0.5px 0 0 -0.5px;
+				padding:40% 0;
+				border:1px solid #000;
+				border-radius:100%;
+				text-align:center;
+				font-family:Georgia,Lucida,serif;
+				font-size:2.5rem;
+				font-style:italic;
+				color:#FFF;
+				opacity:0;
+				background:#000;
+				filter:alpha(opacity=0);
+			}
+			#gallery li:hover em {
+				zoom:1;
+				opacity:1;
+				filter:alpha(opacity=1);
+			}
+			footer {
+				margin:25px 0;
+				text-align:center;
+			}
+			footer a {
+				text-decoration:none;
+				color:#666;
+			}
+			/*----lazyloading---*/
+			.loader{
+				background: url('images/loader.gif') center center no-repeat;
+			}
+			.b-lazy {
+				-webkit-transition: opacity 100ms ease-in-out 10ms;
+				-moz-transition: opacity 100ms ease-in-out 10ms;
+				-o-transition: opacity 100ms ease-in-out 10ms;
+				transition: opacity 100ms ease-in-out 10ms;
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width:24%;
+				height:0;
+				padding-bottom:24%;
+			}
+			@media(max-width:1000px) {
+				#gallery li {
+					width:32%;
+					padding-bottom:32%;
+				}
+			}
+			@media(max-width:800px) {
+				#gallery li {
+					width:48%;
+					padding-bottom:48%;
+				}
+			}
+			@media(max-width:450px) {
+				#gallery li {
+					width:100%;
+					padding-bottom:100%;
+				}
+			}
+		</style>
+	</head>
 
-<body>
+	<body>
-	<header  role="banner">
+		<header  role="banner">
-		<div id="innerheader">
+			<div id="innerheader">
-			<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
-			<% messages %>
+				<% messages %>
-			<nav role="navigation"><% breadcrumb_navigation %></nav>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
-		</div>
+			</div>
-	</header>
+		</header>
 
-	<main id="container">
+		<main id="container">
-		<header><% folder_comment %></header>
+			<header><% folder_comment %></header>
-		<ul id="gallery">
+			<ul id="gallery">
-			<% thumbnails %>
+				<% thumbnails %>
-		</ul>
+			</ul>
-	</main>
+		</main>
 
-	<div class="clear"></div>
+		<div class="clear"></div>
-	<nav role="navigation"><% page_navigation %></nav>
+		<nav role="navigation"><% page_navigation %></nav>
-	<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
+		<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-	<footer role="contentinfo">
+		<footer role="contentinfo">
-		Gallery by <% author %>.
+			Gallery by <% author %>.
-		<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
+			<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
-			Made with miniboardNano by Tom Canac.
+				Made with miniboardNano by Tom Canac.
-		</a>
+			</a>
-		<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
+			<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
-			Rounded theme by Tom Canac.
+				Rounded theme by Tom Canac.
-		</a>
+			</a>
-		<a  title="<% title %> RSS" href="rss/" />
+			<a  title="<% title %> RSS" href="rss/" />
-			RSS
+				RSS
-		<a>
+			<a>
-	</footer>
+		</footer>
-</body>
+	</body>
 </html>

templates/squares.html

@@ -7,161 +7,183 @@
 		<title><% title %></title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<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/mediaboxAdv-1.3.4b.js"></script>
 		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
-
+		<style type="text/css">
-	<style type="text/css">
+			html {
-		html {
+				font-size:62.5%;
-			font-size:62.5%;
-		}
-		.clear {
-			clear:both;
-		}
-		body {
-			width:100%;
-			margin:0;
-			padding:0;
-			text-shadow:0 1px 0 #000;
-			font-family:Helvetica,Arial,sans-serif;
-			font-size:1.5rem;
-			color:#FFF;
-			background:#232321;
-		}
-		a,
-		h1 a {
-			text-decoration:none;
-			color:#FF0084;
-		}
-		h1 {
-			margin:20px 0 0;
-			font-weight:normal;
-		}
-		body > header {
-			padding:1px;
-			text-align:center;
-		}
-		#container,
-		#innerheader {
-			margin:0 auto;
-		}
-		#container header {
-			padding:2rem;
-		}
-		nav {
-			padding-top:15px;
-			font-size:1.3em;
-		}
-		body > nav {
-			text-align:center;
-		}
-		#folder_comment {
-			margin-bottom:10px;
-		}
-		#folder_comment a {
-			text-decoration:none;
-			color:#FFCC11;
-		}
-		#gallery li:hover img,
-		#gallery li img,
-		#gallery li em,
-		#gallery li:hover em {
-			-webkit-transition:all .2s ease-in;
-			-ms-transition:all .2s ease-in;
-			-o-transition:all .2s ease-in;
-			transition:all .2s ease-in;
-		}
-		#gallery {
-			margin:0;
-			padding:0;
-			list-style:none;
-		}
-		#gallery li {
-			float:left;
-			position:relative;
-			overflow:hidden;
-		}
-		#gallery li img {
-			width:100%;
-		}
-		#gallery em {
-			display:block;
-			position:absolute;
-			top:100%;
-			bottom:0;
-			width:100%;
-			padding:40% 0;
-			text-align:center;
-			font-family:Georgia,Lucida,serif;
-			font-size:2.5rem;
-			font-style:italic;
-			color:#FFF;
-			background:rgba(0,0,0,.9);
-		}
-		#gallery li:hover em {
-			top:0;
-		}
-		footer {
-			margin:25px 0;
-			text-align:center;
-		}
-		/*----responsive----*/
-		#gallery li {
-			width:25%;
-			height:0;
-			padding-bottom:24%;
-		}
-		@media(max-width:1000px) {
-			#gallery li {
-				width:32%;
-				padding-bottom:32%;
 			}
-		}
+			.clear {
-		@media(max-width:800px) {
+				clear:both;
-			#gallery li {
-				width:48%;
-				padding-bottom:48%;
 			}
-		}
+			.loader{
-		@media(max-width:450px) {
+				background: url('<% gallery_root %>/img/loader.gif') center center no-repeat
-			#gallery li {
+			}
+			body {
 				width:100%;
-				padding-bottom:100%;
+				margin:0;
+				padding:0;
+				text-shadow:0 1px 0 #000;
+				font-family:Helvetica,Arial,sans-serif;
+				font-size:1.5rem;
+				color:#FFF;
+				background:#232321;
 			}
-		}
+			a,
-	</style>
+			h1 a {
-</head>
+				text-decoration:none;
+				color:#FF0084;
+			}
+			h1 {
+				margin:20px 0 0;
+				font-weight:normal;
+			}
+			body > header {
+				padding:1px;
+				text-align:center;
+			}
+			#container,
+			#innerheader {
+				margin:0 auto;
+			}
+			#container header {
+				padding:2rem;
+			}
+			nav {
+				padding-top:15px;
+				font-size:1.3em;
+			}
+			body > nav {
+				text-align:center;
+			}
+			#folder_comment {
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				text-decoration:none;
+				color:#FFCC11;
+			}
+			#gallery li:hover img,
+			#gallery li img,
+			#gallery li em,
+			#gallery li:hover em {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery {
+				margin:0;
+				padding:0;
+				list-style:none;
+			}
+			#gallery li {
+				float:left;
+				position:relative;
+				overflow:hidden;
+			}
+			#gallery li img {
+				width:100%;
+			}
+			#gallery em {
+				display:block;
+				position:absolute;
+				top:100%;
+				bottom:0;
+				width:100%;
+				padding:40% 0;
+				text-align:center;
+				font-family:Georgia,Lucida,serif;
+				font-size:2.5rem;
+				font-style:italic;
+				color:#FFF;
+				background:rgba(0,0,0,.9);
+			}
+			#gallery li:hover em {
+				top:0;
+			}
+			footer {
+				margin:25px 0;
+				text-align:center;
+			}
+			/*----lazyloading---*/
+			.loader{
+				background: url('images/loader.gif') center center no-repeat;
+			}
+			.b-lazy {
+				-webkit-transition: opacity 100ms ease-in-out 10ms;
+				-moz-transition: opacity 100ms ease-in-out 10ms;
+				-o-transition: opacity 100ms ease-in-out 10ms;
+				transition: opacity 100ms ease-in-out 10ms;
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width:25%;
+				height:0;
+				padding-bottom:24%;
+			}
+			@media(max-width:1000px) {
+				#gallery li {
+					width:32%;
+					padding-bottom:32%;
+				}
+			}
+			@media(max-width:800px) {
+				#gallery li {
+					width:48%;
+					padding-bottom:48%;
+				}
+			}
+			@media(max-width:450px) {
+				#gallery li {
+					width:100%;
+					padding-bottom:100%;
+				}
+			}
+		</style>
+	</head>
 
-<body>
+	<body>
-	<header  role="banner">
+		<header  role="banner">
-		<div id="innerheader">
+			<div id="innerheader">
-			<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
-			<% messages %>
+				<% messages %>
-			<nav role="navigation"><% breadcrumb_navigation %></nav>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
-		</div>
+			</div>
-	</header>
+		</header>
 
-	<main id="container">
+		<main id="container">
-		<header><% folder_comment %></header>
+			<header><% folder_comment %></header>
-		<ul id="gallery">
+			<ul id="gallery">
-			<% thumbnails %>
+				<% thumbnails %>
-		</ul>
+			</ul>
-	</main>
+		</main>
 
-	<div class="clear"></div>
+		<div class="clear"></div>
-	<nav role="navigation"><% page_navigation %></nav>
+		<nav role="navigation"><% page_navigation %></nav>
-	<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
+		<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-	<footer role="contentinfo">
+		<footer role="contentinfo">
-		Gallery by <% author %>.
+			Gallery by <% author %>.
-		<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
+			<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
-			Made with miniboardNano by Tom Canac.
+				Made with miniboardNano by Tom Canac.
-		</a>
+			</a>
-		<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
+			<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
-			Squares theme by Tom Canac.
+				Squares theme by Tom Canac.
-		</a>
+			</a>
-		<a  title="<% title %> RSS" href="rss/" />
+			<a  title="<% title %> RSS" href="rss/" />
-			RSS
+				RSS
-		<a>
+			<a>
-	</footer>
+		</footer>
-</body>
+	</body>
 </html>