Commit 98e88929 authored by Luc Didry's avatar Luc Didry

Gallery: sequential load of images

parent 0b3c9aea
......@@ -83,3 +83,87 @@ label.always-encrypt {
width: 0;
display: hidden;
}
/*
* Spinner
*/
.loader {
color: #666666;
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
% # vim:set sw=4 ts=4 sts=4 ft=javascript expandtab:
$(document).ready(function() {
var absUrl = '<%= url_for('/') %>';
var absUrl = '<%= url_for('/') %>';
var api;
var originalLength
function eachStep(images, i, callback, endcallback) {
if (images.length === 0) {
return endcallback && endcallback();
}
$.when(callback(images[0])).always(function() {
console.log('Adding img '+absUrl+images[0]+' to #gallery')
$('#gallery').append(
[
'<img src="', absUrl+images[0], '" data-image="', absUrl+images[0], '" data-description="" alt="" style="max-width=25%;">'
].join('')
);
$('#spinner p').text('Preloading image '+(i + 2)+' on '+originalLength);
eachStep(images.slice(1), ++i, callback, endcallback);
});
}
function loadImage(imageSrc) {
var deferred = $.Deferred();
if (!imageSrc.match('xcf')) {
preloader = new Image();
preloader.onload = function() {
//console && console.log("Loaded image " + this.src);
deferred.resolve(this.src)
};
preloader.onerror = function() {
console && console.log("Can not load an image " + this.src);
deferred.reject(this.src)
};
preloader.src = absUrl+imageSrc;
}
return deferred;
}
function getImages(key, callback) {
var images = key.split(',');
eachStep(images, 0, function(src) {
console.log("Trying to preload image " + absUrl+src);
return loadImage(src);
}, function() {
console && console.log("Done preloading");
callback();
});
}
$(document).ready(function() {
var key = window.location.hash.substring(1); // Get key
// First, strip everything after the equal sign (=) which signals end of base64 string.
i = key.indexOf('='); if (i>-1) { key = key.substring(0,i+1); }
// If the equal sign was not present, some parameters may remain:
i = key.indexOf('&'); if (i>-1) { key = key.substring(0,i); }
var keys = key.split(',');
$('#download-all').attr('href', $('#download-all').attr('href')+keys.join('&i='));
var items = [];
keys.forEach(function(element, index, array) {
if (!element.match('xcf')) {
$('#gallery').append(
[
'<img src="', absUrl+element, '" data-image="', absUrl+element, '" data-description="" alt="">'
].join('')
);
}
});
var api = $("#gallery").unitegallery({
gallery_theme: "tiles",
tiles_max_columns: 4,
lightbox_overlay_color: "#DDD"
originalLength = keys.length + 1;
$('#gallery').parent().append('<div id="spinner" class="text-center"><p>Preloading image 1 on '+originalLength+'</p><div class="loader"></div></div>');
getImages(key, function() {
$('#spinner').remove();
api = $("#gallery").unitegallery({
gallery_theme: "tiles",
tiles_max_columns: 4,
lightbox_overlay_color: "#DDD"
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment