From c0bdb8a765065429193d2d78a707031451d4abab Mon Sep 17 00:00:00 2001 From: patdenice Date: Wed, 29 Feb 2012 21:21:46 +0000 Subject: Multisize Load thumbnails with ajax. git-svn-id: http://piwigo.org/svn/trunk@13444 68402e56-0260-453c-a942-63ccdbb3a9ee --- i.php | 16 ++++++++++++++++ include/derivative.inc.php | 14 +++++++++++--- themes/default/js/thumbnails.loader.js | 29 +++++++++++++++++++++++++++++ themes/default/template/thumbnails.tpl | 5 ++++- 4 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 themes/default/js/thumbnails.loader.js diff --git a/i.php b/i.php index e3313cd78..7dd2c6cb8 100644 --- a/i.php +++ b/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 @@ if (!$need_generate) exit; } send_derivative($expires); + exit; } $page['coi'] = null; diff --git a/include/derivative.inc.php b/include/derivative.inc.php index 844d93911..2fc536475 100644 --- a/include/derivative.inc.php +++ b/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 @@ final class DerivativeImage $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 @@ final class DerivativeImage 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 @@ final class DerivativeImage $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 @@ final class DerivativeImage return 'width="'.$size[0].'" height="'.$size[1].'"'; } } + + function is_cached() + { + return $this->is_cached; + } } ?> \ No newline at end of file diff --git a/themes/default/js/thumbnails.loader.js b/themes/default/js/thumbnails.loader.js new file mode 100644 index 000000000..e1eba51da --- /dev/null +++ b/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); + } +}); \ No newline at end of file diff --git a/themes/default/template/thumbnails.tpl b/themes/default/template/thumbnails.tpl index 0f8e57acf..6f6c09122 100644 --- a/themes/default/template/thumbnails.tpl +++ b/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)}
  • - {$thumbnail.TN_ALT} + is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}"> {if $SHOW_THUMBNAIL_CAPTION } -- cgit v1.2.3