diff options
Diffstat (limited to 'themes/default/template')
| -rw-r--r-- | themes/default/template/index.tpl | 3 | ||||
| -rw-r--r-- | themes/default/template/mainpage_categories.tpl | 45 | ||||
| -rw-r--r-- | themes/default/template/thumbnails.tpl | 42 |
3 files changed, 82 insertions, 8 deletions
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl index aa92a215f..e6874567e 100644 --- a/themes/default/template/index.tpl +++ b/themes/default/template/index.tpl @@ -171,8 +171,9 @@ jQuery("#derivativeSwitchBox").on("mouseleave", function() { {/if} {if !empty($THUMBNAILS)} +<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div> <ul class="thumbnails" id="thumbnails"> -{$THUMBNAILS} + {$THUMBNAILS} </ul> {/if} {if !empty($thumb_navbar)} diff --git a/themes/default/template/mainpage_categories.tpl b/themes/default/template/mainpage_categories.tpl index 81bb82d75..8657b921b 100644 --- a/themes/default/template/mainpage_categories.tpl +++ b/themes/default/template/mainpage_categories.tpl @@ -7,18 +7,55 @@ height: {$derivative_params->max_height()+5}px; } {/html_style}{/strip} +<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div> <ul class="thumbnailCategories"> {foreach from=$category_thumbnails item=cat name=cat_loop} {assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)} -{if !$derivative->is_cached()} +{if !$derivative->is_cached() and !$js_loaded} {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} -{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} +{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*} +{footer_script}{literal} +var thumbnails_queue = jQuery.manageAjax.create('queued', { + queue: true, + cacheResponse: false, + maxRequests: {/literal}{$maxRequests}{literal}, + preventDoubleRequests: false +}); + +function add_thumbnail_to_queue(img, loop) { + thumbnails_queue.add({ + type: 'GET', + url: img.data('src'), + data: { ajaxload: 'true' }, + dataType: 'json', + beforeSend: function(){jQuery('.loader').show()}, + success: function(result) { + img.attr('src', result.url); + jQuery('.loader').hide(); + }, + error: function() { + if (loop < 3) + add_thumbnail_to_queue(img, ++loop); // Retry 3 times + img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal}); + jQuery('.loader').hide(); + } + }); +} + +function pwg_ajax_thumbnails_loader() { + jQuery('img[data-src]').each(function() { + add_thumbnail_to_queue(jQuery(this), 0); + }); +} +jQuery(document).ready(pwg_ajax_thumbnails_loader); +{/literal}{/footer_script} +{assign var=js_loaded value=true} {/if} - <li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}"> + <li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}"> <div class="thumbnailCategory"> <div class="illustration"> <a href="{$cat.URL}"> - <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-small.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}"> + <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}"> </a> </div> <div class="description"> diff --git a/themes/default/template/thumbnails.tpl b/themes/default/template/thumbnails.tpl index 9121aed60..efb9fba65 100644 --- a/themes/default/template/thumbnails.tpl +++ b/themes/default/template/thumbnails.tpl @@ -23,15 +23,51 @@ {/html_style} {foreach from=$thumbnails item=thumbnail} {assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)} -{if !$derivative->is_cached()} +{if !$derivative->is_cached() and !$js_loaded} {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} -{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} +{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*} +{footer_script}{literal} +var thumbnails_queue = jQuery.manageAjax.create('queued', { + queue: true, + cacheResponse: false, + maxRequests: {/literal}{$maxRequests}{literal}, + preventDoubleRequests: false +}); + +function add_thumbnail_to_queue(img, loop) { + thumbnails_queue.add({ + type: 'GET', + url: img.data('src'), + data: { ajaxload: 'true' }, + dataType: 'json', + beforeSend: function(){jQuery('.loader').show()}, + success: function(result) { + img.attr('src', result.url); + jQuery('.loader').hide(); + }, + error: function() { + if (loop < 3) + add_thumbnail_to_queue(img, ++loop); // Retry 3 times + img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal}); + jQuery('.loader').hide(); + } + }); +} + +function pwg_ajax_thumbnails_loader() { + jQuery('img[data-src]').each(function() { + add_thumbnail_to_queue(jQuery(this), 0); + }); +} +jQuery(document).ready(pwg_ajax_thumbnails_loader); +{/literal}{/footer_script} +{assign var=js_loaded value=true} {/if} <li> <span class="wrap1"> <span class="wrap2"> <a href="{$thumbnail.URL}"> - <img class="thumbnail" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-small.gif" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}"> + <img class="thumbnail" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}"> </a> </span> {if $SHOW_THUMBNAIL_CAPTION } |