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,10 +7,15 @@
 		<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">
 			html {
 				font-size:62.5%;
@@ -134,6 +139,20 @@
 				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%;

templates/squares.html

@@ -7,10 +7,15 @@
 		<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">
 			html {
 				font-size:62.5%;
@@ -18,6 +23,9 @@
 			.clear {
 				clear:both;
 			}
+			.loader{
+				background: url('<% gallery_root %>/img/loader.gif') center center no-repeat
+			}
 			body {
 				width:100%;
 				margin:0;
@@ -105,6 +113,20 @@
 				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%;