From 5ed3ca89748aa6302cd294f207696e2abb521266 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Thu, 21 Nov 2013 17:46:39 +0100 Subject: [PATCH 1/8] Make images that are not ready yet "position: absolute", so they do not not occupy space in the thumbnails-list. Otherwise with "thumbnails: lazy" and thumbs loaded at the beginning and the end of the container, the length of the "thumbnails"-container will be too short and the last thumbnails get pushed to the next line. --- src/galleria.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/galleria.js b/src/galleria.js index d5b3f83d..880c24b2 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1289,6 +1289,7 @@ Galleria = window.Galleria = function() { $.each( self._thumbnails, function( i, thumb ) { if ( thumb.ready ) { + $(thumb.container).css("position","relative"); w += thumb.outerWidth || $( thumb.container ).outerWidth( true ); // Due to a bug in jquery, outerwidth() returns the floor of the actual outerwidth, // if the browser is zoom to a value other than 100%. height() returns the floating point value. @@ -1297,6 +1298,8 @@ Galleria = window.Galleria = function() { hooks[ i+1 ] = w; h = M.max( h, thumb.outerHeight || $( thumb.container).outerHeight( true ) ); + } else { + $(thumb.container).css("position","absolute"); } }); From 88fe0d92aa6f0193605bfb3b398243d92bdd6aac Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Fri, 22 Nov 2013 09:11:31 +0100 Subject: [PATCH 2/8] Experimental "ondemand"-loading of thumbnails. The option `thumbnails: 'ondemand'` can be set in order to load thumbnails when needed: * Thumbnails that are in the visible range of the thumbnails-view are loaded * Thumbnails, that are adjacent to the visible range (one carousel-width before or after) are loaded. * As the carousel moves, more thumbnails are loaded. --- src/galleria.js | 107 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 88 insertions(+), 19 deletions(-) diff --git a/src/galleria.js b/src/galleria.js index 880c24b2..70c7fb66 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1321,6 +1321,74 @@ Galleria = window.Galleria = function() { // todo: fix so the carousel moves to the left }, + /** + * Load thumbs that are currently visible in the thumbnails-container and thumbs + * that are close the the thumbnail-container. + * + * This method loads enough thumbnails to ensure, that moving the thumbnail-viewport + * to the left or to the right is possible without loading. + * + * This method only executes, if the current "thumbnails"-option is set to "ondemand". + * + * @param complete {Function} callback function that is called when all thumbnails have been loaded. + */ + loadThumbsOnDemand: function(complete) { + + + if (self._options.thumbnails !== 'ondemand') { + complete && complete(); + return; + } + + // Return the hook or NaN, if the image is not loaded + function hookOrNaN(hookIndex) { + if (carousel.hooks.length > hookIndex) { + return carousel.hooks[hookIndex]; + } + return NaN; + }; + + var maxLoad = 5; + var toLoad = []; + // Search ahead for not-loaded thumbnail in (doubled) visible range + var currentHook = hookOrNaN(carousel.current); + if (isNaN(currentHook)) { + // Cannot determine any positions, just loading thumbs ahead. + for(var i=0;i carousel.max && hook <= max - carousel.max) + || (min < 0 && min + carousel.max <= hook))) { + // Out of range. Break loop. + break; + } + } + }); + } + + if (toLoad.length>0) { + self.lazyLoad(toLoad,function() { + carousel.loadThumbsOnDemand(complete); + }); + } else if (complete) { + complete(); + } + + }, + + bindControls: function() { var i; @@ -1329,14 +1397,14 @@ Galleria = window.Galleria = function() { e.preventDefault(); if ( self._options.carouselSteps === 'auto' ) { - - for ( i = carousel.current; i < carousel.hooks.length; i++ ) { - if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.width ) { - carousel.set(i - 2); - break; + carousel.loadThumbsOnDemand(function() { + for ( i = carousel.current; i < carousel.hooks.length; i++ ) { + if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.width ) { + carousel.set(i - 2); + break; + } } - } - + }); } else { carousel.set( carousel.current + self._options.carouselSteps); } @@ -1346,16 +1414,17 @@ Galleria = window.Galleria = function() { e.preventDefault(); if ( self._options.carouselSteps === 'auto' ) { - - for ( i = carousel.current; i >= 0; i-- ) { - if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.width ) { - carousel.set( i + 2 ); - break; - } else if ( i === 0 ) { - carousel.set( 0 ); - break; + carousel.loadThumbsOnDemand(function() { + for ( i = carousel.current; i >= 0; i-- ) { + if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.width ) { + carousel.set( i + 2 ); + break; + } else if ( i === 0 ) { + carousel.set( 0 ); + break; + } } - } + }); } else { carousel.set( carousel.current - self._options.carouselSteps ); } @@ -1369,7 +1438,7 @@ Galleria = window.Galleria = function() { i--; } carousel.current = i; - carousel.animate(); + carousel.loadThumbsOnDemand(carousel.animate); }, // get the last position @@ -3345,7 +3414,7 @@ Galleria.prototype = { // get source from thumb or image src = data.thumb || data.image; - if ( ( o.thumbnails === true || optval == 'lazy' ) && ( data.thumb || data.image ) ) { + if ( ( o.thumbnails === true || optval == 'lazy' || optval == 'ondemand') && ( data.thumb || data.image ) ) { // add a new Picture instance thumb = new Galleria.Picture(i); @@ -3386,7 +3455,7 @@ Galleria.prototype = { } // load the thumbnail - if ( optval == 'lazy' ) { + if ( optval == 'lazy' || optval == 'ondemand' ) { $container.addClass( 'lazy' ); From 6d9a230724b4022851b6bcfc41af3fa9260de5b0 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Fri, 22 Nov 2013 09:12:30 +0100 Subject: [PATCH 3/8] Update README --- README.rst | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.rst b/README.rst index 90bb0137..59ec8b1a 100644 --- a/README.rst +++ b/README.rst @@ -25,15 +25,16 @@ You can build local HTML using Sphinx: http://sphinx.pocoo.org/ Changes compared to original (aino) version of galleria ======================================================= -* Fix for "No theme CSS loaded", when galleria is loaded dynamically through JS and AJAX Galleria may be inserted into - the dom dynamically (e.g. via JavaScript loaded from an AJAX-Request). In such a case, the theme's script-tag seems - not to be immediately present in the DOM when the addTheme-function looks for it. We therefore try multiple times - before raising an error. - * Sometimes, the dummy image was not scaled and centered properly when using lazyLoadChunked(). This was due to the dimensions of the dummy image not being computed in time (with lazyLoadChunked(...)). We changed the retry method from "retry once after 2ms" to "Utils.wait{ ..., timeout: 100 }" to retry multiple times for 100ms. +* Experimental "ondemand"-loading of thumbnails. The option `thumbnails: 'ondemand'` can be set in order to load thumbnails + when needed: + + * Thumbnails that are in the visible range of the thumbnails-view are loaded + * Thumbnails, that are adjacent to the visible range (one carousel-width before or after) are loaded. + * As the carousel moves, more thumbnails are loaded. From bccc31b311f97a2afa1abfed6bbf397b93258f85 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Fri, 22 Nov 2013 13:54:40 +0100 Subject: [PATCH 4/8] on-demand chunk-size is now configurable by option 'onDemandChunkSize' (default 5) --- README.rst | 4 +--- src/galleria.js | 12 +++++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.rst b/README.rst index 59ec8b1a..0c92d86a 100644 --- a/README.rst +++ b/README.rst @@ -32,9 +32,7 @@ Changes compared to original (aino) version of galleria * Experimental "ondemand"-loading of thumbnails. The option `thumbnails: 'ondemand'` can be set in order to load thumbnails when needed: - * Thumbnails that are in the visible range of the thumbnails-view are loaded * Thumbnails, that are adjacent to the visible range (one carousel-width before or after) are loaded. * As the carousel moves, more thumbnails are loaded. - - + Thumbs are loaded in chunks. The chunk size is read from the option `onDemandChunkSize` (default: 5) diff --git a/src/galleria.js b/src/galleria.js index 858b915f..3df622f4 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -448,7 +448,7 @@ var doc = window.document, // the actual animation method return function( elem, to, options ) { - // extend defaults + // extend s options = $.extend({ duration: 400, complete: F, @@ -1347,13 +1347,12 @@ Galleria = function() { return NaN; }; - var maxLoad = 5; var toLoad = []; // Search ahead for not-loaded thumbnail in (doubled) visible range var currentHook = hookOrNaN(carousel.current); if (isNaN(currentHook)) { // Cannot determine any positions, just loading thumbs ahead. - for(var i=0;i carousel.max && hook <= max - carousel.max) || (min < 0 && min + carousel.max <= hook))) { - // Out of range. Break loop. + // Out of loadable range. Break loop. break; } } @@ -1378,6 +1378,7 @@ Galleria = function() { } if (toLoad.length>0) { + // If loadable thumbs have been detected, load them and re-run the whole process until no image are loaded anymore. self.lazyLoad(toLoad,function() { carousel.loadThumbsOnDemand(complete); }); @@ -2657,6 +2658,7 @@ Galleria.prototype = { popupLinks: false, preload: 2, queue: true, + onDemandChunkSize: 5, // 1.3.3 responsive: true, show: 0, showInfo: true, From 86659bb72b8eb5e09d7a09624a4f3200fb309e25 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Mon, 25 Nov 2013 17:38:34 +0100 Subject: [PATCH 5/8] Ensure that the carousel moves at least one picture in the desired direction, even though too few images are displayed. --- src/galleria.js | 4 +- src/themes/classic/classic-demo.html | 186 ++++++++++++++++++++++++++- 2 files changed, 181 insertions(+), 9 deletions(-) diff --git a/src/galleria.js b/src/galleria.js index 3df622f4..1e097713 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1400,7 +1400,7 @@ Galleria = function() { carousel.loadThumbsOnDemand(function() { for ( i = carousel.current; i < carousel.hooks.length; i++ ) { if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.width ) { - carousel.set(i - 2); + carousel.set(Math.max(i-2,carousel.current+1)); break; } } @@ -1417,7 +1417,7 @@ Galleria = function() { carousel.loadThumbsOnDemand(function() { for ( i = carousel.current; i >= 0; i-- ) { if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.width ) { - carousel.set( i + 2 ); + carousel.set(Math.min(i+2,carousel.current-1)); break; } else if ( i === 0 ) { carousel.set( 0 ); diff --git a/src/themes/classic/classic-demo.html b/src/themes/classic/classic-demo.html index 467217d9..0d57190a 100644 --- a/src/themes/classic/classic-demo.html +++ b/src/themes/classic/classic-demo.html @@ -8,7 +8,6 @@ /* Demo styles */ html,body{background:#222;margin:0;} body{border-top:4px solid #000;} - .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;} h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;} p{margin:0 0 20px} a {color:#22BCB9;text-decoration:none;} @@ -34,14 +33,184 @@

Galleria Classic Theme

- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Galleria Classic Theme // Load the classic theme Galleria.loadTheme('galleria.classic.js'); + // Initialize Galleria - Galleria.run('#galleria'); + Galleria.run('#galleria',{ + thumbnails:'ondemand' + }); From 974a139704e11dc3494a6056bb1b6a94ea526220 Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Tue, 26 Nov 2013 14:56:59 +0100 Subject: [PATCH 6/8] Updater README.rst: "Ensure that the carousel moves at least one image in the desired direction, even if to few images fit into it." --- README.rst | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.rst b/README.rst index 0c92d86a..d4ae9404 100644 --- a/README.rst +++ b/README.rst @@ -36,3 +36,5 @@ Changes compared to original (aino) version of galleria * Thumbnails, that are adjacent to the visible range (one carousel-width before or after) are loaded. * As the carousel moves, more thumbnails are loaded. Thumbs are loaded in chunks. The chunk size is read from the option `onDemandChunkSize` (default: 5) + +* Ensure that the carousel moves at least one image in the desired direction, even if to few images fit into it. \ No newline at end of file From d582abe747288a9a7e720d78c5a8ac975870e25c Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Mon, 2 Dec 2013 09:05:52 +0100 Subject: [PATCH 7/8] Better prevention of wrongly computed thumbs-container-width with lazy thumbnails This is a fix for commit "5ed3ca89748aa6302cd294f207696e2abb521266". This commit made sure that lazy loaded images are displayed "position:absolute" until they are loaded, in order to make sure they do not occupy space in the thumbscontainer. The side-effect was (in IE 10) that images where displayed for a short time in the left corner of the container after loading, until the position was set to "relative" in "_carousel.update()". This commit also uses the width of not-yet-loaded image containers for computing the total with of the thumbs-container and makes sure that these images get maximal height so that following images really have the expected position. --- src/galleria.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/galleria.js b/src/galleria.js index 1e097713..738f773f 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1286,21 +1286,28 @@ Galleria = function() { h = 0, hooks = [0]; + var maxImgHeight = 1; + var unloadedImg = []; $.each( self._thumbnails, function( i, thumb ) { - if ( thumb.ready ) { - $(thumb.container).css("position","relative"); w += thumb.outerWidth || $( thumb.container ).outerWidth( true ); // Due to a bug in jquery, outerwidth() returns the floor of the actual outerwidth, // if the browser is zoom to a value other than 100%. height() returns the floating point value. var containerWidth = $( thumb.container).width(); w += containerWidth - M.floor(containerWidth); - + if ( thumb.ready ) { hooks[ i+1 ] = w; h = M.max( h, thumb.outerHeight || $( thumb.container).outerHeight( true ) ); + maxImgHeight = Math.max(thumb.image.height,maxImgHeight); } else { - $(thumb.container).css("position","absolute"); + unloadedImg.push(thumb); } }); + // Make sure that lazy image push images to the right + $.each (unloadedImg, function(i,thumb) { + $(thumb.container).css({ + "height": maxImgHeight+"px" + }); + }); self.$( 'thumbnails' ).css({ width: w, From 40a131c1a3a50d7138d1c9757938de281f2ab16d Mon Sep 17 00:00:00 2001 From: Nils Knappmeier Date: Mon, 28 Apr 2014 13:58:39 +0200 Subject: [PATCH 8/8] The first image was not displayed in some setups, when "load=ondemand" was configured. Bugfix: In some rare cases, updateCarousel() is called before any thumbs are loaded. In such a case, the load method lwas loading the previous images and images ahead, but the the current (i.e. the first) image. --- src/galleria.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/galleria.js b/src/galleria.js index 738f773f..0021667c 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1367,6 +1367,10 @@ Galleria = function() { var min = currentHook - carousel.width; var max = currentHook + carousel.width * 2; + // Check if the current thumbnail is loaded, and add it to the list if not. + if (!self._thumbnails[carousel.current].ready) { + toLoad.push(carousel.current); + } // First look ahead and then backwards $([1,-1]).each(function(index, increment) { for (var c = 1; c < self._data.length && toLoad.length