Multisize

Load thumbnails with ajax.

git-svn-id: http://piwigo.org/svn/trunk@13444 68402e56-0260-453c-a942-63ccdbb3a9ee

themes/default/js/thumbnails.loader.js

@@ -0,0 +1,29 @@
+var thumbnails_queue = jQuery.manageAjax.create('queued', {
+  queue: true,  
+  cacheResponse: false,
+  maxRequests: 3,
+  preventDoubleRequests: false
+});
+
+function add_thumbnail_to_queue(img, loop) {
+  thumbnails_queue.add({
+    type: 'GET', 
+    url: img.data('src'), 
+    data: { ajaxload: 'true' },
+    dataType: 'json',
+    success: function(result) {
+      img.attr('src', result.url);
+    },
+    error: function() {
+      if (loop < 3)
+        add_thumbnail_to_queue(img, ++loop); // Retry 3 times
+    }
+  }); 
+}
+
+jQuery('img').each(function() {
+  var img = jQuery(this);
+  if (typeof img.data('src') != 'undefined') {
+    add_thumbnail_to_queue(img, 0);
+  }
+});

themes/default/template/thumbnails.tpl

@@ -1,4 +1,6 @@
 {if !empty($thumbnails)}{strip}
+{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='async'}
+{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='async'}
 {*define_derivative name='derivative_params' width=160 height=90 crop=true*}
 {html_style}
 {*Set some sizes according to maximum thumbnail width and height*}
@@ -22,11 +24,12 @@
 {/if}
 {/html_style}
 {foreach from=$thumbnails item=thumbnail}
+{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}
 	<li>
 	<span class="wrap1">
 		<span class="wrap2">
 		<a href="{$thumbnail.URL}">
-			<img class="thumbnail" src="{$pwg->derivative_url($derivative_params, $thumbnail.src_image)}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
+			<img class="thumbnail" {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
 		</a>
 		</span>
 		{if $SHOW_THUMBNAIL_CAPTION }