aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2015-03-01 10:47:01 +0100
committerArthurHoaro <arthur@hoa.ro>2015-03-01 11:23:03 +0100
commit34047d23fb5e09b6bc2728f0f8827eaa038f02ea (patch)
treef13db75997d25db1cee52da3bd985259863e165b
parent7572cfbe9620b13569ee47337f7015bcad119332 (diff)
downloadShaarli-34047d23fb5e09b6bc2728f0f8827eaa038f02ea.tar.gz
Shaarli-34047d23fb5e09b6bc2728f0f8827eaa038f02ea.tar.zst
Shaarli-34047d23fb5e09b6bc2728f0f8827eaa038f02ea.zip
Lazy load images with the light lib bLazy.js instead of jQuery:
* Remove jquery.lazyload lib * Add blazy lib * Add a bit of CSS animation * Delete unused picwall2 template
-rw-r--r--COPYING4
-rw-r--r--inc/blazy-1.3.1.js232
-rw-r--r--inc/blazy-1.3.1.min.js6
-rw-r--r--inc/jquery.lazyload-1.9.3.js242
-rw-r--r--inc/jquery.lazyload-1.9.3.min.js2
-rw-r--r--inc/shaarli.css12
-rw-r--r--index.php7
-rw-r--r--tpl/picwall.html12
-rw-r--r--tpl/picwall2.html19
9 files changed, 256 insertions, 280 deletions
diff --git a/COPYING b/COPYING
index 715ba35a..ec4f7681 100644
--- a/COPYING
+++ b/COPYING
@@ -50,9 +50,9 @@ Files: Files: inc/jquery*.js, inc/jquery-ui*.js
50License: MIT License (http://opensource.org/licenses/MIT) 50License: MIT License (http://opensource.org/licenses/MIT)
51Copyright: (C) jQuery Foundation and other contributors,https://jquery.com/download/ 51Copyright: (C) jQuery Foundation and other contributors,https://jquery.com/download/
52 52
53Files: inc/jquery-lazyload*.js 53Files: inc/blazy*.js
54License: MIT License (http://opensource.org/licenses/MIT) 54License: MIT License (http://opensource.org/licenses/MIT)
55Copyright: (C) Mika Tuupola, https://github.com/tuupola 55Copyright: (C) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
56 56
57Files: inc/qr.js 57Files: inc/qr.js
58License: GPLv3 License (http://opensource.org/licenses/gpl-3.0) 58License: GPLv3 License (http://opensource.org/licenses/gpl-3.0)
diff --git a/inc/blazy-1.3.1.js b/inc/blazy-1.3.1.js
new file mode 100644
index 00000000..cfc2dbde
--- /dev/null
+++ b/inc/blazy-1.3.1.js
@@ -0,0 +1,232 @@
1/*!
2 hey, [be]Lazy.js - v1.3.1 - 2015.02.01
3 A lazy loading and multi-serving image script
4 (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
5*/
6;(function(root, blazy) {
7 if (typeof define === 'function' && define.amd) {
8 // AMD. Register bLazy as an anonymous module
9 define(blazy);
10 } else if (typeof exports === 'object') {
11 // Node. Does not work with strict CommonJS, but
12 // only CommonJS-like environments that support module.exports,
13 // like Node.
14 module.exports = blazy();
15 } else {
16 // Browser globals. Register bLazy on window
17 root.Blazy = blazy();
18 }
19})(this, function () {
20 'use strict';
21
22 //vars
23 var source, options, viewport, images, count, isRetina, destroyed;
24 //throttle vars
25 var validateT, saveViewportOffsetT;
26
27 // constructor
28 function Blazy(settings) {
29 //IE7- fallback for missing querySelectorAll support
30 if (!document.querySelectorAll) {
31 var s=document.createStyleSheet();
32 document.querySelectorAll = function(r, c, i, j, a) {
33 a=document.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
34 for (i=r.length; i--;) {
35 s.addRule(r[i], 'k:v');
36 for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
37 s.removeRule(0);
38 }
39 return c;
40 };
41 }
42 //init vars
43 destroyed = true;
44 images = [];
45 viewport = {};
46 //options
47 options = settings || {};
48 options.error = options.error || false;
49 options.offset = options.offset || 100;
50 options.success = options.success || false;
51 options.selector = options.selector || '.b-lazy';
52 options.separator = options.separator || '|';
53 options.container = options.container ? document.querySelectorAll(options.container) : false;
54 options.errorClass = options.errorClass || 'b-error';
55 options.breakpoints = options.breakpoints || false;
56 options.successClass = options.successClass || 'b-loaded';
57 options.src = source = options.src || 'data-src';
58 isRetina = window.devicePixelRatio > 1;
59 viewport.top = 0 - options.offset;
60 viewport.left = 0 - options.offset;
61 //throttle, ensures that we don't call the functions too often
62 validateT = throttle(validate, 25);
63 saveViewportOffsetT = throttle(saveViewportOffset, 50);
64
65 saveViewportOffset();
66
67 //handle multi-served image src
68 each(options.breakpoints, function(object){
69 if(object.width >= window.screen.width) {
70 source = object.src;
71 return false;
72 }
73 });
74
75 // start lazy load
76 initialize();
77 }
78
79 /* public functions
80 ************************************/
81 Blazy.prototype.revalidate = function() {
82 initialize();
83 };
84 Blazy.prototype.load = function(element, force){
85 if(!isElementLoaded(element)) loadImage(element, force);
86 };
87 Blazy.prototype.destroy = function(){
88 if(options.container){
89 each(options.container, function(object){
90 unbindEvent(object, 'scroll', validateT);
91 });
92 }
93 unbindEvent(window, 'scroll', validateT);
94 unbindEvent(window, 'resize', validateT);
95 unbindEvent(window, 'resize', saveViewportOffsetT);
96 count = 0;
97 images.length = 0;
98 destroyed = true;
99 };
100
101 /* private helper functions
102 ************************************/
103 function initialize(){
104 // First we create an array of images to lazy load
105 createImageArray(options.selector);
106 // Then we bind resize and scroll events if not already binded
107 if(destroyed) {
108 destroyed = false;
109 if(options.container) {
110 each(options.container, function(object){
111 bindEvent(object, 'scroll', validateT);
112 });
113 }
114 bindEvent(window, 'resize', saveViewportOffsetT);
115 bindEvent(window, 'resize', validateT);
116 bindEvent(window, 'scroll', validateT);
117 }
118 // And finally, we start to lazy load. Should bLazy ensure domready?
119 validate();
120 }
121
122 function validate() {
123 for(var i = 0; i<count; i++){
124 var image = images[i];
125 if(elementInView(image) || isElementLoaded(image)) {
126 Blazy.prototype.load(image);
127 images.splice(i, 1);
128 count--;
129 i--;
130 }
131 }
132 if(count === 0) {
133 Blazy.prototype.destroy();
134 }
135 }
136
137 function loadImage(ele, force){
138 // if element is visible
139 if(force || (ele.offsetWidth > 0 && ele.offsetHeight > 0)) {
140 var dataSrc = ele.getAttribute(source) || ele.getAttribute(options.src); // fallback to default data-src
141 if(dataSrc) {
142 var dataSrcSplitted = dataSrc.split(options.separator);
143 var src = dataSrcSplitted[isRetina && dataSrcSplitted.length > 1 ? 1 : 0];
144 var img = new Image();
145 // cleanup markup, remove data source attributes
146 each(options.breakpoints, function(object){
147 ele.removeAttribute(object.src);
148 });
149 ele.removeAttribute(options.src);
150 img.onerror = function() {
151 if(options.error) options.error(ele, "invalid");
152 ele.className = ele.className + ' ' + options.errorClass;
153 };
154 img.onload = function() {
155 // Is element an image or should we add the src as a background image?
156 ele.nodeName.toLowerCase() === 'img' ? ele.src = src : ele.style.backgroundImage = 'url("' + src + '")';
157 ele.className = ele.className + ' ' + options.successClass;
158 if(options.success) options.success(ele);
159 };
160 img.src = src; //preload image
161 } else {
162 if(options.error) options.error(ele, "missing");
163 ele.className = ele.className + ' ' + options.errorClass;
164 }
165 }
166 }
167
168 function elementInView(ele) {
169 var rect = ele.getBoundingClientRect();
170
171 return (
172 // Intersection
173 rect.right >= viewport.left
174 && rect.bottom >= viewport.top
175 && rect.left <= viewport.right
176 && rect.top <= viewport.bottom
177 );
178 }
179
180 function isElementLoaded(ele) {
181 return (' ' + ele.className + ' ').indexOf(' ' + options.successClass + ' ') !== -1;
182 }
183
184 function createImageArray(selector) {
185 var nodelist = document.querySelectorAll(selector);
186 count = nodelist.length;
187 //converting nodelist to array
188 for(var i = count; i--; images.unshift(nodelist[i])){}
189 }
190
191 function saveViewportOffset(){
192 viewport.bottom = (window.innerHeight || document.documentElement.clientHeight) + options.offset;
193 viewport.right = (window.innerWidth || document.documentElement.clientWidth) + options.offset;
194 }
195
196 function bindEvent(ele, type, fn) {
197 if (ele.attachEvent) {
198 ele.attachEvent && ele.attachEvent('on' + type, fn);
199 } else {
200 ele.addEventListener(type, fn, false);
201 }
202 }
203
204 function unbindEvent(ele, type, fn) {
205 if (ele.detachEvent) {
206 ele.detachEvent && ele.detachEvent('on' + type, fn);
207 } else {
208 ele.removeEventListener(type, fn, false);
209 }
210 }
211
212 function each(object, fn){
213 if(object && fn) {
214 var l = object.length;
215 for(var i = 0; i<l && fn(object[i], i) !== false; i++){}
216 }
217 }
218
219 function throttle(fn, minDelay) {
220 var lastCall = 0;
221 return function() {
222 var now = +new Date();
223 if (now - lastCall < minDelay) {
224 return;
225 }
226 lastCall = now;
227 fn.apply(images, arguments);
228 };
229 }
230
231 return Blazy;
232});
diff --git a/inc/blazy-1.3.1.min.js b/inc/blazy-1.3.1.min.js
new file mode 100644
index 00000000..55cdc2d5
--- /dev/null
+++ b/inc/blazy-1.3.1.min.js
@@ -0,0 +1,6 @@
1/*!
2 hey, [be]Lazy.js - v1.3.1 - 2015.02.01
3 A lazy loading and multi-serving image script
4 (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
5*/
6 (function(d,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():d.Blazy=h()})(this,function(){function d(b){if(!document.querySelectorAll){var g=document.createStyleSheet();document.querySelectorAll=function(b,a,e,d,f){f=document.all;a=[];b=b.replace(/\[for\b/gi,"[htmlFor").split(",");for(e=b.length;e--;){g.addRule(b[e],"k:v");for(d=f.length;d--;)f[d].currentStyle.k&&a.push(f[d]);g.removeRule(0)}return a}}m=!0;k=[];e={};a=b||{};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?document.querySelectorAll(a.container):!1;a.errorClass=a.errorClass||"b-error";a.breakpoints=a.breakpoints||!1;a.successClass=a.successClass||"b-loaded";a.src=r=a.src||"data-src";u=1<window.devicePixelRatio;e.top=0-a.offset;e.left=0-a.offset;f=v(w,25);t=v(x,50);x();n(a.breakpoints,function(b){if(b.width>=window.screen.width)return r=b.src,!1});h()}function h(){y(a.selector);m&&(m=!1,a.container&&n(a.container,function(b){p(b,"scroll",f)}),p(window,"resize",t),p(window,"resize",f),p(window,"scroll",f));w()}function w(){for(var b=0;b<l;b++){var g=k[b],c=g.getBoundingClientRect();if(c.right>=e.left&&c.bottom>=e.top&&c.left<=e.right&&c.top<=e.bottom||-1!==(" "+g.className+" ").indexOf(" "+a.successClass+" "))d.prototype.load(g),k.splice(b,1),l--,b--}0===l&&d.prototype.destroy()}function z(b,g){if(g||0<b.offsetWidth&&0<b.offsetHeight){var c=b.getAttribute(r)||b.getAttribute(a.src);if(c){var c=c.split(a.separator),d=c[u&&1<c.length?1:0],c=new Image;n(a.breakpoints,function(a){b.removeAttribute(a.src)});b.removeAttribute(a.src);c.onerror=function(){a.error&&a.error(b,"invalid");b.className=b.className+" "+a.errorClass};c.onload=function(){"img"===b.nodeName.toLowerCase()?b.src=d:b.style.backgroundImage='url("'+d+'")';b.className=b.className+" "+a.successClass;a.success&&a.success(b)};c.src=d}else a.error&&a.error(b,"missing"),b.className=b.className+" "+a.errorClass}}function y(b){b=document.querySelectorAll(b);for(var a=l=b.length;a--;k.unshift(b[a]));}function x(){e.bottom=(window.innerHeight||document.documentElement.clientHeight)+a.offset;e.right=(window.innerWidth||document.documentElement.clientWidth)+a.offset}function p(b,a,c){b.attachEvent?b.attachEvent&&b.attachEvent("on"+a,c):b.addEventListener(a,c,!1)}function q(b,a,c){b.detachEvent?b.detachEvent&&b.detachEvent("on"+a,c):b.removeEventListener(a,c,!1)}function n(a,d){if(a&&d)for(var c=a.length,e=0;e<c&&!1!==d(a[e],e);e++);}function v(a,d){var c=0;return function(){var e=+new Date;e-c<d||(c=e,a.apply(k,arguments))}}var r,a,e,k,l,u,m,f,t;d.prototype.revalidate=function(){h()};d.prototype.load=function(b,d){-1===(" "+b.className+" ").indexOf(" "+a.successClass+" ")&&z(b,d)};d.prototype.destroy=function(){a.container&&n(a.container,function(a){q(a,"scroll",f)});q(window,"scroll",f);q(window,"resize",f);q(window,"resize",t);l=0;k.length=0;m=!0};return d}); \ No newline at end of file
diff --git a/inc/jquery.lazyload-1.9.3.js b/inc/jquery.lazyload-1.9.3.js
deleted file mode 100644
index 5a22d8ea..00000000
--- a/inc/jquery.lazyload-1.9.3.js
+++ /dev/null
@@ -1,242 +0,0 @@
1/*
2 * Lazy Load - jQuery plugin for lazy loading images
3 *
4 * Copyright (c) 2007-2013 Mika Tuupola
5 *
6 * Licensed under the MIT license:
7 * http://www.opensource.org/licenses/mit-license.php
8 *
9 * Project home:
10 * http://www.appelsiini.net/projects/lazyload
11 *
12 * Version: 1.9.3
13 *
14 */
15
16(function($, window, document, undefined) {
17 var $window = $(window);
18
19 $.fn.lazyload = function(options) {
20 var elements = this;
21 var $container;
22 var settings = {
23 threshold : 0,
24 failure_limit : 0,
25 event : "scroll",
26 effect : "show",
27 container : window,
28 data_attribute : "original",
29 skip_invisible : true,
30 appear : null,
31 load : null,
32 placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
33 };
34
35 function update() {
36 var counter = 0;
37
38 elements.each(function() {
39 var $this = $(this);
40 if (settings.skip_invisible && !$this.is(":visible")) {
41 return;
42 }
43 if ($.abovethetop(this, settings) ||
44 $.leftofbegin(this, settings)) {
45 /* Nothing. */
46 } else if (!$.belowthefold(this, settings) &&
47 !$.rightoffold(this, settings)) {
48 $this.trigger("appear");
49 /* if we found an image we'll load, reset the counter */
50 counter = 0;
51 } else {
52 if (++counter > settings.failure_limit) {
53 return false;
54 }
55 }
56 });
57
58 }
59
60 if(options) {
61 /* Maintain BC for a couple of versions. */
62 if (undefined !== options.failurelimit) {
63 options.failure_limit = options.failurelimit;
64 delete options.failurelimit;
65 }
66 if (undefined !== options.effectspeed) {
67 options.effect_speed = options.effectspeed;
68 delete options.effectspeed;
69 }
70
71 $.extend(settings, options);
72 }
73
74 /* Cache container as jQuery as object. */
75 $container = (settings.container === undefined ||
76 settings.container === window) ? $window : $(settings.container);
77
78 /* Fire one scroll event per scroll. Not one scroll event per image. */
79 if (0 === settings.event.indexOf("scroll")) {
80 $container.bind(settings.event, function() {
81 return update();
82 });
83 }
84
85 this.each(function() {
86 var self = this;
87 var $self = $(self);
88
89 self.loaded = false;
90
91 /* If no src attribute given use data:uri. */
92 if ($self.attr("src") === undefined || $self.attr("src") === false) {
93 if ($self.is("img")) {
94 $self.attr("src", settings.placeholder);
95 }
96 }
97
98 /* When appear is triggered load original image. */
99 $self.one("appear", function() {
100 if (!this.loaded) {
101 if (settings.appear) {
102 var elements_left = elements.length;
103 settings.appear.call(self, elements_left, settings);
104 }
105 $("<img />")
106 .bind("load", function() {
107
108 var original = $self.attr("data-" + settings.data_attribute);
109 $self.hide();
110 if ($self.is("img")) {
111 $self.attr("src", original);
112 } else {
113 $self.css("background-image", "url('" + original + "')");
114 }
115 $self[settings.effect](settings.effect_speed);
116
117 self.loaded = true;
118
119 /* Remove image from array so it is not looped next time. */
120 var temp = $.grep(elements, function(element) {
121 return !element.loaded;
122 });
123 elements = $(temp);
124
125 if (settings.load) {
126 var elements_left = elements.length;
127 settings.load.call(self, elements_left, settings);
128 }
129 })
130 .attr("src", $self.attr("data-" + settings.data_attribute));
131 }
132 });
133
134 /* When wanted event is triggered load original image */
135 /* by triggering appear. */
136 if (0 !== settings.event.indexOf("scroll")) {
137 $self.bind(settings.event, function() {
138 if (!self.loaded) {
139 $self.trigger("appear");
140 }
141 });
142 }
143 });
144
145 /* Check if something appears when window is resized. */
146 $window.bind("resize", function() {
147 update();
148 });
149
150 /* With IOS5 force loading images when navigating with back button. */
151 /* Non optimal workaround. */
152 if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
153 $window.bind("pageshow", function(event) {
154 if (event.originalEvent && event.originalEvent.persisted) {
155 elements.each(function() {
156 $(this).trigger("appear");
157 });
158 }
159 });
160 }
161
162 /* Force initial check if images should appear. */
163 $(document).ready(function() {
164 update();
165 });
166
167 return this;
168 };
169
170 /* Convenience methods in jQuery namespace. */
171 /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
172
173 $.belowthefold = function(element, settings) {
174 var fold;
175
176 if (settings.container === undefined || settings.container === window) {
177 fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
178 } else {
179 fold = $(settings.container).offset().top + $(settings.container).height();
180 }
181
182 return fold <= $(element).offset().top - settings.threshold;
183 };
184
185 $.rightoffold = function(element, settings) {
186 var fold;
187
188 if (settings.container === undefined || settings.container === window) {
189 fold = $window.width() + $window.scrollLeft();
190 } else {
191 fold = $(settings.container).offset().left + $(settings.container).width();
192 }
193
194 return fold <= $(element).offset().left - settings.threshold;
195 };
196
197 $.abovethetop = function(element, settings) {
198 var fold;
199
200 if (settings.container === undefined || settings.container === window) {
201 fold = $window.scrollTop();
202 } else {
203 fold = $(settings.container).offset().top;
204 }
205
206 return fold >= $(element).offset().top + settings.threshold + $(element).height();
207 };
208
209 $.leftofbegin = function(element, settings) {
210 var fold;
211
212 if (settings.container === undefined || settings.container === window) {
213 fold = $window.scrollLeft();
214 } else {
215 fold = $(settings.container).offset().left;
216 }
217
218 return fold >= $(element).offset().left + settings.threshold + $(element).width();
219 };
220
221 $.inviewport = function(element, settings) {
222 return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
223 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
224 };
225
226 /* Custom selectors for your convenience. */
227 /* Use as $("img:below-the-fold").something() or */
228 /* $("img").filter(":below-the-fold").something() which is faster */
229
230 $.extend($.expr[":"], {
231 "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
232 "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
233 "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
234 "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
235 "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
236 /* Maintain BC for couple of versions. */
237 "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
238 "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
239 "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
240 });
241
242})(jQuery, window, document);
diff --git a/inc/jquery.lazyload-1.9.3.min.js b/inc/jquery.lazyload-1.9.3.min.js
deleted file mode 100644
index 615b90e5..00000000
--- a/inc/jquery.lazyload-1.9.3.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
1/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
2!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document); \ No newline at end of file
diff --git a/inc/shaarli.css b/inc/shaarli.css
index bb564e99..a88143ca 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -647,9 +647,21 @@ a.qrcode img {
647 float: left; 647 float: left;
648} 648}
649 649
650.b-lazy {
651 -webkit-transition: opacity 500ms ease-in-out;
652 -moz-transition: opacity 500ms ease-in-out;
653 -o-transition: opacity 500ms ease-in-out;
654 transition: opacity 500ms ease-in-out;
655 opacity: 0;
656}
657.b-lazy.b-loaded {
658 opacity: 1;
659}
660
650.picwall_pictureframe img { 661.picwall_pictureframe img {
651 max-width: 100%; 662 max-width: 100%;
652 height: auto; 663 height: auto;
664 color: transparent;
653} /* Adapt the width of the image */ 665} /* Adapt the width of the image */
654 666
655.picwall_pictureframe a { 667.picwall_pictureframe a {
diff --git a/index.php b/index.php
index 99c37652..890eb581 100644
--- a/index.php
+++ b/index.php
@@ -2125,11 +2125,8 @@ function lazyThumbnail($url,$href=false)
2125 2125
2126 $html='<a href="'.htmlspecialchars($t['href']).'">'; 2126 $html='<a href="'.htmlspecialchars($t['href']).'">';
2127 2127
2128 // Lazy image (only loaded by JavaScript when in the viewport). 2128 // Lazy image
2129 if (!empty($GLOBALS['disablejquery'])) // (except if jQuery is disabled) 2129 $html.='<img class="b-lazy" src="#" data-src="'.htmlspecialchars($t['src']).'"';
2130 $html.='<img class="lazyimage" src="'.htmlspecialchars($t['src']).'"';
2131 else
2132 $html.='<img class="lazyimage" src="#" data-original="'.htmlspecialchars($t['src']).'"';
2133 2130
2134 if (!empty($t['width'])) $html.=' width="'.htmlspecialchars($t['width']).'"'; 2131 if (!empty($t['width'])) $html.=' width="'.htmlspecialchars($t['width']).'"';
2135 if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"'; 2132 if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';
diff --git a/tpl/picwall.html b/tpl/picwall.html
index d3cabb2d..ea1ef420 100644
--- a/tpl/picwall.html
+++ b/tpl/picwall.html
@@ -1,11 +1,7 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3<head>{include="includes"} 3<head>{include="includes"}
4{if="empty($GLOBALS['disablejquery'])"} 4<script src="inc/blazy-1.3.1.min.js#"></script>
5<script src="inc/jquery-1.11.2.min.js#"></script>
6<script src="inc/jquery-ui-1.11.2.min.js#"></script>
7<script src="inc/jquery.lazyload-1.9.3.min.js#"></script>
8{/if}
9</head> 5</head>
10<body> 6<body>
11<div id="pageheader">{include="page.header"}</div> 7<div id="pageheader">{include="page.header"}</div>
@@ -20,12 +16,8 @@
20</div> 16</div>
21{include="page.footer"} 17{include="page.footer"}
22 18
23{if="empty($GLOBALS['disablejquery'])"}
24<script> 19<script>
25$(document).ready(function() { 20 var bLazy = new Blazy();
26 $("img.lazyimage").show().lazyload();
27});
28</script> 21</script>
29{/if}
30</body> 22</body>
31</html> \ No newline at end of file 23</html> \ No newline at end of file
diff --git a/tpl/picwall2.html b/tpl/picwall2.html
deleted file mode 100644
index 44d08b0c..00000000
--- a/tpl/picwall2.html
+++ /dev/null
@@ -1,19 +0,0 @@
1<!DOCTYPE html>
2<html>
3<head>{include="includes"}</head>
4<body>
5<div id="pageheader">{include="page.header"}</div>
6<div style="background-color:#003;">
7 {loop="linksToDisplay"}
8 <div style="float:left;width:48%;border-right:2px solid white;height:120px;overflow:hide;">
9 <div style="float:left;width:120px;text-align:center">{$value.thumbnail}</div>
10 <a href="{$value.permalink}" style="color:yellow;font-weight:bold;text-decoration:none;">{$value.title|htmlspecialchars}</a><br>
11 <span style="font-size:8pt;color:#eee;">{$value.description|htmlspecialchars}</span>
12 <div style="clear:both;"></div>
13 </div><br>
14 {/loop}
15</div>
16
17{include="page.footer"}
18</body>
19</html> \ No newline at end of file