Multisize

Load thumbnails with ajax.

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

Author: patdenice

i.php

@@ -319,6 +319,17 @@ function try_switch_source(DerivativeParams $params, $original_mtime)
 function send_derivative($expires)
 {
   global $page;
+
+  if (isset($_GET['ajaxload']) and $_GET['ajaxload'] == 'true')
+  {
+    include_once(PHPWG_ROOT_PATH.'include/functions_cookie.inc.php');
+    include_once(PHPWG_ROOT_PATH.'include/functions_url.inc.php');
+
+    $response = new json_response();
+    $response->url = embellish_url(get_absolute_root_url().$page['derivative_path']);
+    echo json_encode($response);
+    return;
+  }
   $fp = fopen($page['derivative_path'], 'rb');
 
   $fstat = fstat($fp);
@@ -343,6 +354,10 @@ function send_derivative($expires)
   fclose($fp);
 }
 
+class json_response
+{
+  var $url;
+}
 
 $page=array();
 $begin = $step = microtime(true);
@@ -400,6 +415,7 @@ function send_derivative($expires)
     exit;
   }
   send_derivative($expires);
+  exit;
 }
 
 $page['coi'] = null;

include/derivative.inc.php

@@ -99,7 +99,7 @@ final class DerivativeImage
   public $src_image;
 
   private $params;
-  private $rel_path, $rel_url;
+  private $rel_path, $rel_url, $is_cached;
 
   function __construct($type, $src_image)
   {
@@ -113,7 +113,7 @@ function __construct($type, $src_image)
       $this->params = $type;
     }
 
-    self::build($src_image, $this->params, $this->rel_path, $this->rel_url);
+    self::build($src_image, $this->params, $this->rel_path, $this->rel_url, $this->is_cached);
   }
 
   static function thumb_url($infos)
@@ -153,13 +153,14 @@ static function get_all($src_image)
     return $ret;
   }
 
-  private static function build($src, &$params, &$rel_path, &$rel_url)
+  private static function build($src, &$params, &$rel_path, &$rel_url, &$is_cached=null)
   {
     if ( $src->has_size() && $params->is_identity( $src->get_size() ) )
     {
       // todo - what if we have a watermark maybe return a smaller size?
       $params = null;
       $rel_path = $rel_url = $src->rel_path;
+      $is_cached = true;
       return;
     }
 
@@ -191,10 +192,12 @@ private static function build($src, &$params, &$rel_path, &$rel_url)
       $mtime = @filemtime(PHPWG_ROOT_PATH.$rel_path);
       if ($mtime===false or $mtime < $params->last_mod_time)
       {
+        $is_cached = false;
         $url_style = 2;
       }
       else
       {
+        $is_cached = true;
         $url_style = 1;
       }
     }
@@ -303,6 +306,11 @@ function get_scaled_size_htm($maxw=9999, $maxh=9999)
       return 'width="'.$size[0].'" height="'.$size[1].'"';
     }
   }
+
+  function is_cached()
+  {
+    return $this->is_cached;
+  }
 }
 
 ?>

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 }