Merge pull request #132 from ArthurHoaro/picwall
Lazy load images with the light lib bLazy.js instead of jQuery
This commit is contained in:
nodiscc
commit
0e5400e617
9 changed files with 250 additions and 278 deletions
4
COPYING
4
COPYING
|
|
@ -50,9 +50,9 @@ Files: Files: inc/jquery*.js, inc/jquery-ui*.js
|
||||||
License: MIT License (http://opensource.org/licenses/MIT)
|
License: MIT License (http://opensource.org/licenses/MIT)
|
||||||
Copyright: (C) jQuery Foundation and other contributors,https://jquery.com/download/
|
Copyright: (C) jQuery Foundation and other contributors,https://jquery.com/download/
|
||||||
|
|
||||||
Files: inc/jquery-lazyload*.js
|
Files: inc/blazy*.js
|
||||||
License: MIT License (http://opensource.org/licenses/MIT)
|
License: MIT License (http://opensource.org/licenses/MIT)
|
||||||
Copyright: (C) Mika Tuupola, https://github.com/tuupola
|
Copyright: (C) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
|
||||||
|
|
||||||
Files: inc/qr.js
|
Files: inc/qr.js
|
||||||
License: GPLv3 License (http://opensource.org/licenses/gpl-3.0)
|
License: GPLv3 License (http://opensource.org/licenses/gpl-3.0)
|
||||||
|
|
|
||||||
232
inc/blazy-1.3.1.js
Normal file
232
inc/blazy-1.3.1.js
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
/*!
|
||||||
|
hey, [be]Lazy.js - v1.3.1 - 2015.02.01
|
||||||
|
A lazy loading and multi-serving image script
|
||||||
|
(c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
|
||||||
|
*/
|
||||||
|
;(function(root, blazy) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register bLazy as an anonymous module
|
||||||
|
define(blazy);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node. Does not work with strict CommonJS, but
|
||||||
|
// only CommonJS-like environments that support module.exports,
|
||||||
|
// like Node.
|
||||||
|
module.exports = blazy();
|
||||||
|
} else {
|
||||||
|
// Browser globals. Register bLazy on window
|
||||||
|
root.Blazy = blazy();
|
||||||
|
}
|
||||||
|
})(this, function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
//vars
|
||||||
|
var source, options, viewport, images, count, isRetina, destroyed;
|
||||||
|
//throttle vars
|
||||||
|
var validateT, saveViewportOffsetT;
|
||||||
|
|
||||||
|
// constructor
|
||||||
|
function Blazy(settings) {
|
||||||
|
//IE7- fallback for missing querySelectorAll support
|
||||||
|
if (!document.querySelectorAll) {
|
||||||
|
var s=document.createStyleSheet();
|
||||||
|
document.querySelectorAll = function(r, c, i, j, a) {
|
||||||
|
a=document.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
|
||||||
|
for (i=r.length; i--;) {
|
||||||
|
s.addRule(r[i], 'k:v');
|
||||||
|
for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
|
||||||
|
s.removeRule(0);
|
||||||
|
}
|
||||||
|
return c;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
//init vars
|
||||||
|
destroyed = true;
|
||||||
|
images = [];
|
||||||
|
viewport = {};
|
||||||
|
//options
|
||||||
|
options = settings || {};
|
||||||
|
options.error = options.error || false;
|
||||||
|
options.offset = options.offset || 100;
|
||||||
|
options.success = options.success || false;
|
||||||
|
options.selector = options.selector || '.b-lazy';
|
||||||
|
options.separator = options.separator || '|';
|
||||||
|
options.container = options.container ? document.querySelectorAll(options.container) : false;
|
||||||
|
options.errorClass = options.errorClass || 'b-error';
|
||||||
|
options.breakpoints = options.breakpoints || false;
|
||||||
|
options.successClass = options.successClass || 'b-loaded';
|
||||||
|
options.src = source = options.src || 'data-src';
|
||||||
|
isRetina = window.devicePixelRatio > 1;
|
||||||
|
viewport.top = 0 - options.offset;
|
||||||
|
viewport.left = 0 - options.offset;
|
||||||
|
//throttle, ensures that we don't call the functions too often
|
||||||
|
validateT = throttle(validate, 25);
|
||||||
|
saveViewportOffsetT = throttle(saveViewportOffset, 50);
|
||||||
|
|
||||||
|
saveViewportOffset();
|
||||||
|
|
||||||
|
//handle multi-served image src
|
||||||
|
each(options.breakpoints, function(object){
|
||||||
|
if(object.width >= window.screen.width) {
|
||||||
|
source = object.src;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// start lazy load
|
||||||
|
initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* public functions
|
||||||
|
************************************/
|
||||||
|
Blazy.prototype.revalidate = function() {
|
||||||
|
initialize();
|
||||||
|
};
|
||||||
|
Blazy.prototype.load = function(element, force){
|
||||||
|
if(!isElementLoaded(element)) loadImage(element, force);
|
||||||
|
};
|
||||||
|
Blazy.prototype.destroy = function(){
|
||||||
|
if(options.container){
|
||||||
|
each(options.container, function(object){
|
||||||
|
unbindEvent(object, 'scroll', validateT);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
unbindEvent(window, 'scroll', validateT);
|
||||||
|
unbindEvent(window, 'resize', validateT);
|
||||||
|
unbindEvent(window, 'resize', saveViewportOffsetT);
|
||||||
|
count = 0;
|
||||||
|
images.length = 0;
|
||||||
|
destroyed = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* private helper functions
|
||||||
|
************************************/
|
||||||
|
function initialize(){
|
||||||
|
// First we create an array of images to lazy load
|
||||||
|
createImageArray(options.selector);
|
||||||
|
// Then we bind resize and scroll events if not already binded
|
||||||
|
if(destroyed) {
|
||||||
|
destroyed = false;
|
||||||
|
if(options.container) {
|
||||||
|
each(options.container, function(object){
|
||||||
|
bindEvent(object, 'scroll', validateT);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
bindEvent(window, 'resize', saveViewportOffsetT);
|
||||||
|
bindEvent(window, 'resize', validateT);
|
||||||
|
bindEvent(window, 'scroll', validateT);
|
||||||
|
}
|
||||||
|
// And finally, we start to lazy load. Should bLazy ensure domready?
|
||||||
|
validate();
|
||||||
|
}
|
||||||
|
|
||||||
|
function validate() {
|
||||||
|
for(var i = 0; i<count; i++){
|
||||||
|
var image = images[i];
|
||||||
|
if(elementInView(image) || isElementLoaded(image)) {
|
||||||
|
Blazy.prototype.load(image);
|
||||||
|
images.splice(i, 1);
|
||||||
|
count--;
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(count === 0) {
|
||||||
|
Blazy.prototype.destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadImage(ele, force){
|
||||||
|
// if element is visible
|
||||||
|
if(force || (ele.offsetWidth > 0 && ele.offsetHeight > 0)) {
|
||||||
|
var dataSrc = ele.getAttribute(source) || ele.getAttribute(options.src); // fallback to default data-src
|
||||||
|
if(dataSrc) {
|
||||||
|
var dataSrcSplitted = dataSrc.split(options.separator);
|
||||||
|
var src = dataSrcSplitted[isRetina && dataSrcSplitted.length > 1 ? 1 : 0];
|
||||||
|
var img = new Image();
|
||||||
|
// cleanup markup, remove data source attributes
|
||||||
|
each(options.breakpoints, function(object){
|
||||||
|
ele.removeAttribute(object.src);
|
||||||
|
});
|
||||||
|
ele.removeAttribute(options.src);
|
||||||
|
img.onerror = function() {
|
||||||
|
if(options.error) options.error(ele, "invalid");
|
||||||
|
ele.className = ele.className + ' ' + options.errorClass;
|
||||||
|
};
|
||||||
|
img.onload = function() {
|
||||||
|
// Is element an image or should we add the src as a background image?
|
||||||
|
ele.nodeName.toLowerCase() === 'img' ? ele.src = src : ele.style.backgroundImage = 'url("' + src + '")';
|
||||||
|
ele.className = ele.className + ' ' + options.successClass;
|
||||||
|
if(options.success) options.success(ele);
|
||||||
|
};
|
||||||
|
img.src = src; //preload image
|
||||||
|
} else {
|
||||||
|
if(options.error) options.error(ele, "missing");
|
||||||
|
ele.className = ele.className + ' ' + options.errorClass;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function elementInView(ele) {
|
||||||
|
var rect = ele.getBoundingClientRect();
|
||||||
|
|
||||||
|
return (
|
||||||
|
// Intersection
|
||||||
|
rect.right >= viewport.left
|
||||||
|
&& rect.bottom >= viewport.top
|
||||||
|
&& rect.left <= viewport.right
|
||||||
|
&& rect.top <= viewport.bottom
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isElementLoaded(ele) {
|
||||||
|
return (' ' + ele.className + ' ').indexOf(' ' + options.successClass + ' ') !== -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createImageArray(selector) {
|
||||||
|
var nodelist = document.querySelectorAll(selector);
|
||||||
|
count = nodelist.length;
|
||||||
|
//converting nodelist to array
|
||||||
|
for(var i = count; i--; images.unshift(nodelist[i])){}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveViewportOffset(){
|
||||||
|
viewport.bottom = (window.innerHeight || document.documentElement.clientHeight) + options.offset;
|
||||||
|
viewport.right = (window.innerWidth || document.documentElement.clientWidth) + options.offset;
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvent(ele, type, fn) {
|
||||||
|
if (ele.attachEvent) {
|
||||||
|
ele.attachEvent && ele.attachEvent('on' + type, fn);
|
||||||
|
} else {
|
||||||
|
ele.addEventListener(type, fn, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unbindEvent(ele, type, fn) {
|
||||||
|
if (ele.detachEvent) {
|
||||||
|
ele.detachEvent && ele.detachEvent('on' + type, fn);
|
||||||
|
} else {
|
||||||
|
ele.removeEventListener(type, fn, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function each(object, fn){
|
||||||
|
if(object && fn) {
|
||||||
|
var l = object.length;
|
||||||
|
for(var i = 0; i<l && fn(object[i], i) !== false; i++){}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function throttle(fn, minDelay) {
|
||||||
|
var lastCall = 0;
|
||||||
|
return function() {
|
||||||
|
var now = +new Date();
|
||||||
|
if (now - lastCall < minDelay) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lastCall = now;
|
||||||
|
fn.apply(images, arguments);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return Blazy;
|
||||||
|
});
|
||||||
BIN
inc/blazy-1.3.1.min.js
vendored
Normal file
BIN
inc/blazy-1.3.1.min.js
vendored
Normal file
Binary file not shown.
|
|
@ -1,242 +0,0 @@
|
||||||
/*
|
|
||||||
* Lazy Load - jQuery plugin for lazy loading images
|
|
||||||
*
|
|
||||||
* Copyright (c) 2007-2013 Mika Tuupola
|
|
||||||
*
|
|
||||||
* Licensed under the MIT license:
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
*
|
|
||||||
* Project home:
|
|
||||||
* http://www.appelsiini.net/projects/lazyload
|
|
||||||
*
|
|
||||||
* Version: 1.9.3
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function($, window, document, undefined) {
|
|
||||||
var $window = $(window);
|
|
||||||
|
|
||||||
$.fn.lazyload = function(options) {
|
|
||||||
var elements = this;
|
|
||||||
var $container;
|
|
||||||
var settings = {
|
|
||||||
threshold : 0,
|
|
||||||
failure_limit : 0,
|
|
||||||
event : "scroll",
|
|
||||||
effect : "show",
|
|
||||||
container : window,
|
|
||||||
data_attribute : "original",
|
|
||||||
skip_invisible : true,
|
|
||||||
appear : null,
|
|
||||||
load : null,
|
|
||||||
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
|
|
||||||
};
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
var counter = 0;
|
|
||||||
|
|
||||||
elements.each(function() {
|
|
||||||
var $this = $(this);
|
|
||||||
if (settings.skip_invisible && !$this.is(":visible")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($.abovethetop(this, settings) ||
|
|
||||||
$.leftofbegin(this, settings)) {
|
|
||||||
/* Nothing. */
|
|
||||||
} else if (!$.belowthefold(this, settings) &&
|
|
||||||
!$.rightoffold(this, settings)) {
|
|
||||||
$this.trigger("appear");
|
|
||||||
/* if we found an image we'll load, reset the counter */
|
|
||||||
counter = 0;
|
|
||||||
} else {
|
|
||||||
if (++counter > settings.failure_limit) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if(options) {
|
|
||||||
/* Maintain BC for a couple of versions. */
|
|
||||||
if (undefined !== options.failurelimit) {
|
|
||||||
options.failure_limit = options.failurelimit;
|
|
||||||
delete options.failurelimit;
|
|
||||||
}
|
|
||||||
if (undefined !== options.effectspeed) {
|
|
||||||
options.effect_speed = options.effectspeed;
|
|
||||||
delete options.effectspeed;
|
|
||||||
}
|
|
||||||
|
|
||||||
$.extend(settings, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cache container as jQuery as object. */
|
|
||||||
$container = (settings.container === undefined ||
|
|
||||||
settings.container === window) ? $window : $(settings.container);
|
|
||||||
|
|
||||||
/* Fire one scroll event per scroll. Not one scroll event per image. */
|
|
||||||
if (0 === settings.event.indexOf("scroll")) {
|
|
||||||
$container.bind(settings.event, function() {
|
|
||||||
return update();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.each(function() {
|
|
||||||
var self = this;
|
|
||||||
var $self = $(self);
|
|
||||||
|
|
||||||
self.loaded = false;
|
|
||||||
|
|
||||||
/* If no src attribute given use data:uri. */
|
|
||||||
if ($self.attr("src") === undefined || $self.attr("src") === false) {
|
|
||||||
if ($self.is("img")) {
|
|
||||||
$self.attr("src", settings.placeholder);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When appear is triggered load original image. */
|
|
||||||
$self.one("appear", function() {
|
|
||||||
if (!this.loaded) {
|
|
||||||
if (settings.appear) {
|
|
||||||
var elements_left = elements.length;
|
|
||||||
settings.appear.call(self, elements_left, settings);
|
|
||||||
}
|
|
||||||
$("<img />")
|
|
||||||
.bind("load", function() {
|
|
||||||
|
|
||||||
var original = $self.attr("data-" + settings.data_attribute);
|
|
||||||
$self.hide();
|
|
||||||
if ($self.is("img")) {
|
|
||||||
$self.attr("src", original);
|
|
||||||
} else {
|
|
||||||
$self.css("background-image", "url('" + original + "')");
|
|
||||||
}
|
|
||||||
$self[settings.effect](settings.effect_speed);
|
|
||||||
|
|
||||||
self.loaded = true;
|
|
||||||
|
|
||||||
/* Remove image from array so it is not looped next time. */
|
|
||||||
var temp = $.grep(elements, function(element) {
|
|
||||||
return !element.loaded;
|
|
||||||
});
|
|
||||||
elements = $(temp);
|
|
||||||
|
|
||||||
if (settings.load) {
|
|
||||||
var elements_left = elements.length;
|
|
||||||
settings.load.call(self, elements_left, settings);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.attr("src", $self.attr("data-" + settings.data_attribute));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* When wanted event is triggered load original image */
|
|
||||||
/* by triggering appear. */
|
|
||||||
if (0 !== settings.event.indexOf("scroll")) {
|
|
||||||
$self.bind(settings.event, function() {
|
|
||||||
if (!self.loaded) {
|
|
||||||
$self.trigger("appear");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Check if something appears when window is resized. */
|
|
||||||
$window.bind("resize", function() {
|
|
||||||
update();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* With IOS5 force loading images when navigating with back button. */
|
|
||||||
/* Non optimal workaround. */
|
|
||||||
if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
|
|
||||||
$window.bind("pageshow", function(event) {
|
|
||||||
if (event.originalEvent && event.originalEvent.persisted) {
|
|
||||||
elements.each(function() {
|
|
||||||
$(this).trigger("appear");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Force initial check if images should appear. */
|
|
||||||
$(document).ready(function() {
|
|
||||||
update();
|
|
||||||
});
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/* Convenience methods in jQuery namespace. */
|
|
||||||
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
|
|
||||||
|
|
||||||
$.belowthefold = function(element, settings) {
|
|
||||||
var fold;
|
|
||||||
|
|
||||||
if (settings.container === undefined || settings.container === window) {
|
|
||||||
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
|
|
||||||
} else {
|
|
||||||
fold = $(settings.container).offset().top + $(settings.container).height();
|
|
||||||
}
|
|
||||||
|
|
||||||
return fold <= $(element).offset().top - settings.threshold;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.rightoffold = function(element, settings) {
|
|
||||||
var fold;
|
|
||||||
|
|
||||||
if (settings.container === undefined || settings.container === window) {
|
|
||||||
fold = $window.width() + $window.scrollLeft();
|
|
||||||
} else {
|
|
||||||
fold = $(settings.container).offset().left + $(settings.container).width();
|
|
||||||
}
|
|
||||||
|
|
||||||
return fold <= $(element).offset().left - settings.threshold;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.abovethetop = function(element, settings) {
|
|
||||||
var fold;
|
|
||||||
|
|
||||||
if (settings.container === undefined || settings.container === window) {
|
|
||||||
fold = $window.scrollTop();
|
|
||||||
} else {
|
|
||||||
fold = $(settings.container).offset().top;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fold >= $(element).offset().top + settings.threshold + $(element).height();
|
|
||||||
};
|
|
||||||
|
|
||||||
$.leftofbegin = function(element, settings) {
|
|
||||||
var fold;
|
|
||||||
|
|
||||||
if (settings.container === undefined || settings.container === window) {
|
|
||||||
fold = $window.scrollLeft();
|
|
||||||
} else {
|
|
||||||
fold = $(settings.container).offset().left;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fold >= $(element).offset().left + settings.threshold + $(element).width();
|
|
||||||
};
|
|
||||||
|
|
||||||
$.inviewport = function(element, settings) {
|
|
||||||
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
|
|
||||||
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* Custom selectors for your convenience. */
|
|
||||||
/* Use as $("img:below-the-fold").something() or */
|
|
||||||
/* $("img").filter(":below-the-fold").something() which is faster */
|
|
||||||
|
|
||||||
$.extend($.expr[":"], {
|
|
||||||
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
|
|
||||||
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
|
|
||||||
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
|
|
||||||
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
|
|
||||||
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
|
|
||||||
/* Maintain BC for couple of versions. */
|
|
||||||
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
|
|
||||||
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
|
|
||||||
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
|
|
||||||
});
|
|
||||||
|
|
||||||
})(jQuery, window, document);
|
|
||||||
BIN
inc/jquery.lazyload-1.9.3.min.js
vendored
BIN
inc/jquery.lazyload-1.9.3.min.js
vendored
Binary file not shown.
|
|
@ -647,9 +647,21 @@ a.qrcode img {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.b-lazy {
|
||||||
|
-webkit-transition: opacity 500ms ease-in-out;
|
||||||
|
-moz-transition: opacity 500ms ease-in-out;
|
||||||
|
-o-transition: opacity 500ms ease-in-out;
|
||||||
|
transition: opacity 500ms ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.b-lazy.b-loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.picwall_pictureframe img {
|
.picwall_pictureframe img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
color: transparent;
|
||||||
} /* Adapt the width of the image */
|
} /* Adapt the width of the image */
|
||||||
|
|
||||||
.picwall_pictureframe a {
|
.picwall_pictureframe a {
|
||||||
|
|
|
||||||
|
|
@ -2125,11 +2125,8 @@ function lazyThumbnail($url,$href=false)
|
||||||
|
|
||||||
$html='<a href="'.htmlspecialchars($t['href']).'">';
|
$html='<a href="'.htmlspecialchars($t['href']).'">';
|
||||||
|
|
||||||
// Lazy image (only loaded by JavaScript when in the viewport).
|
// Lazy image
|
||||||
if (!empty($GLOBALS['disablejquery'])) // (except if jQuery is disabled)
|
$html.='<img class="b-lazy" src="#" data-src="'.htmlspecialchars($t['src']).'"';
|
||||||
$html.='<img class="lazyimage" src="'.htmlspecialchars($t['src']).'"';
|
|
||||||
else
|
|
||||||
$html.='<img class="lazyimage" src="#" data-original="'.htmlspecialchars($t['src']).'"';
|
|
||||||
|
|
||||||
if (!empty($t['width'])) $html.=' width="'.htmlspecialchars($t['width']).'"';
|
if (!empty($t['width'])) $html.=' width="'.htmlspecialchars($t['width']).'"';
|
||||||
if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';
|
if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>{include="includes"}
|
<head>{include="includes"}
|
||||||
{if="empty($GLOBALS['disablejquery'])"}
|
<script src="inc/blazy-1.3.1.min.js#"></script>
|
||||||
<script src="inc/jquery-1.11.2.min.js#"></script>
|
|
||||||
<script src="inc/jquery-ui-1.11.2.min.js#"></script>
|
|
||||||
<script src="inc/jquery.lazyload-1.9.3.min.js#"></script>
|
|
||||||
{/if}
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="pageheader">{include="page.header"}</div>
|
<div id="pageheader">{include="page.header"}</div>
|
||||||
|
|
@ -20,12 +16,8 @@
|
||||||
</div>
|
</div>
|
||||||
{include="page.footer"}
|
{include="page.footer"}
|
||||||
|
|
||||||
{if="empty($GLOBALS['disablejquery'])"}
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
var bLazy = new Blazy();
|
||||||
$("img.lazyimage").show().lazyload();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
{/if}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>{include="includes"}</head>
|
|
||||||
<body>
|
|
||||||
<div id="pageheader">{include="page.header"}</div>
|
|
||||||
<div style="background-color:#003;">
|
|
||||||
{loop="linksToDisplay"}
|
|
||||||
<div style="float:left;width:48%;border-right:2px solid white;height:120px;overflow:hide;">
|
|
||||||
<div style="float:left;width:120px;text-align:center">{$value.thumbnail}</div>
|
|
||||||
<a href="{$value.permalink}" style="color:yellow;font-weight:bold;text-decoration:none;">{$value.title|htmlspecialchars}</a><br>
|
|
||||||
<span style="font-size:8pt;color:#eee;">{$value.description|htmlspecialchars}</span>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
</div><br>
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{include="page.footer"}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue