Index: /extensions/flop_style/mainpage_categories/jPolaroid.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/jPolaroid.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/jPolaroid.tpl	(revision 16501)
@@ -2,4 +2,6 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/jPolaroid/jpolaroid.minified.css"}
 {combine_script id="jquery.jpolaroid.minified" load="header" path="template-extension/flop_style/mainpage_categories/jPolaroid/jquery.jpolaroid.min.js"}
+{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'}
 {html_head}
   {literal}
@@ -32,7 +34,8 @@
 <ul class="jpolaroid">
 {foreach from=$category_thumbnails item=cat}
+{assign var=derivative value=$pwg->derivative($derivative_jPolaroid, $cat.representative.src_image)}
   <li>
 			<a href="{$cat.URL}" title="{$cat.NAME|@replace:'"':' '}">
-				<img src="{$pwg->derivative_url($derivative_jPolaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
+				<img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
 			</a>
 	</li>
Index: /extensions/flop_style/mainpage_categories/medium_cat.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/medium_cat.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/medium_cat.tpl	(revision 16501)
@@ -6,5 +6,7 @@
 
 .thumbnailCategory {
-	height:{/literal}{$derivative_params->max_width()+50}{literal}px;
+	height:{/literal}{$derivative_params->max_width()+60}{literal}px;
+	width:{/literal}{$derivative_params->max_width()+10}{literal}px;
+  overflow:hidden;
 }
 {/literal}{/html_style}
Index: /extensions/flop_style/mainpage_categories/mosaic.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/mosaic.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/mosaic.tpl	(revision 16501)
@@ -2,4 +2,6 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/mosaic.css"}
 {combine_script id="jquery.mosaic" load="header" path="template-extension/flop_style/mainpage_categories/mosaic/mosaic.1.0.1.min.js"}
+{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'}
 {html_head}
   {literal} 
@@ -22,4 +24,5 @@
 {define_derivative name='derivative_mosaic' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true}
 <div id="mosaic-content"> {foreach from=$category_thumbnails item=cat}
+{assign var=derivative value=$pwg->derivative($derivative_mosaic, $cat.representative.src_image)}
   <div class="mosaic-block bar"> <a href="{$cat.URL}" class="mosaic-overlay">
     <div class="details">
@@ -35,5 +38,5 @@
     </div>
     </a>
-    <div class="mosaic-backdrop"> <img src="{$pwg->derivative_url($derivative_mosaic, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> </div>
+    <div class="mosaic-backdrop"> <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}"> </div>
   </div>
   {/foreach}
Index: /extensions/flop_style/mainpage_categories/picpile_cat.css
===================================================================
--- /extensions/flop_style/mainpage_categories/picpile_cat.css	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/picpile_cat.css	(revision 16501)
@@ -2,7 +2,4 @@
 }
 .thumbnailCategories {
-	padding-left:auto;
-	padding-right:auto;
-	padding: 5px;
 	list-style: none outside none;
 	text-align: center;
Index: /extensions/flop_style/mainpage_categories/picpile_cat.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/picpile_cat.tpl	(revision 16501)
@@ -1,3 +1,5 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/picpile_cat.css"}
+{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'}
 {if $themeconf.name == "Sylvia"}
 {html_style}
@@ -34,34 +36,8 @@
   <span class="wrap1"><div class="albumHolder">
     <div class="picRotated"></div>
-    <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img {$der_picpile_cat->get_size_htm()} title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" src="{$der_picpile_cat->get_url()}"> <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </div>
+    <div class="album"> <a class="ajax" href="{$cat.URL}"> <span title="Browse Album" class="highlight"></span> <img {if $der_picpile_cat->is_cached()}src="{$der_picpile_cat->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$der_picpile_cat->get_url()}"{/if}  {$der_picpile_cat->get_size_htm()} title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" alt="{$cat.TN_ALT}" > <span title="Contains {$cat.CAPTION_NB_IMAGES} images" class="albumCnt">{$cat.CAPTION_NB_IMAGES}</span> </a> </div>
     <div title="{$cat.NAME}" class="albumTitle">{$cat.NAME}</div>
     <div class="clear"></div>
   </div>
-  {*
-		<div class="thumbnailCategory">
-			<div class="illustration">
-			<a href="{$cat.URL}">
-				<img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}">
-			</a>
-			</div>
-			<div class="description">
-				<h3>
-					<a href="{$cat.URL}">{$cat.NAME}</a>
-					{if !empty($cat.icon_ts)}
-					<img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
-					{/if}
-				</h3>
-		<div class="text">
-				{if isset($cat.INFO_DATES) }
-				<p class="dates">{$cat.INFO_DATES}</p>
-				{/if}
-				<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
-				{if not empty($cat.DESCRIPTION)}
-				<p>{$cat.DESCRIPTION}</p>
-				{/if}
-		</div>
-			</div>
-		</div>
-  *}
   </span>
   </li>
Index: /extensions/flop_style/mainpage_categories/polaroid.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/polaroid.tpl	(revision 16501)
@@ -1,3 +1,5 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/polaroid.css"}
+{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'}
 {html_style}{literal}
 ul.polaroids a {
@@ -13,7 +15,8 @@
 <ul class="polaroids">
 {foreach from=$category_thumbnails item=cat}
-  <li>
+ {assign var=derivative value=$pwg->derivative($derivative_polaroid, $cat.representative.src_image)}
+ <li>
 			<a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}">
-				<img src="{$pwg->derivative_url($derivative_polaroid, $cat.representative.src_image)}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
+				<img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
 			</a>
 	</li>
Index: /extensions/flop_style/mainpage_categories/popout_details.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/popout_details.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/popout_details.tpl	(revision 16501)
@@ -1,3 +1,5 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/popout_details.css"}
+{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'}
 {footer_script require='jquery'}
 {literal} 
@@ -5,5 +7,5 @@
 var max_dim_height = 0;
 jQuery(window).load(function() {
-  $(".columns a img").each(function () {
+  jQuery(".columns a img").each(function () {
     if (jQuery(this).height() > max_dim_height)
       max_dim_height = jQuery(this).height() + 10;
@@ -25,7 +27,8 @@
 <ul class="columns">
 {foreach from=$category_thumbnails item=cat}
+{assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)}
   <li>
       <a href="{$cat.URL}">
-        <img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}">
+        <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}">
       </a>
       <div class="info">
Index: /extensions/flop_style/mainpage_categories/spotlight.tpl
===================================================================
--- /extensions/flop_style/mainpage_categories/spotlight.tpl	(revision 16500)
+++ /extensions/flop_style/mainpage_categories/spotlight.tpl	(revision 16501)
@@ -1,58 +1,49 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/spotlight.css"}
+{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'}
 {footer_script require='jquery'}{literal}
-$(document).ready(function () {
+jQuery(document).ready(function () {
  
     //loop through all the children in #items
     //save title value to a span and then remove the value of the title to avoid tooltips
-    $('#items .item').each(function () {
-        title = $(this).attr('title');
-        $(this).append('<span class="caption">' + title + '</span>');   
-        $(this).attr('title','');
+    jQuery('#items .item').each(function () {
+        title = jQuery(this).attr('title');
+        jQuery(this).append('<span class="caption">' + title + '</span>');   
+        jQuery(this).attr('title','');
     });
  
-    $('#items .item').hover(
+    jQuery('#items .item').hover(
         function () {
             //set the opacity of all siblings
-            $(this).siblings().css({'opacity': '0.1'}); 
+            jQuery(this).siblings().css({'opacity': '0.1'}); 
              
             //set the opacity of current item to full, and add the effect class
-            $(this).css({'opacity': '1.0'}).addClass('effect');
+            jQuery(this).css({'opacity': '1.0'}).addClass('effect');
              
             //show the caption
-            $(this).children('.caption').show();    
+            jQuery(this).children('.caption').show();    
         },
         function () {
             //hide the caption
-            $(this).children('.caption').hide();        
+            jQuery(this).children('.caption').hide();        
         }
     );
      
-    $('#items').mouseleave(function () {
+    jQuery('#items').mouseleave(function () {
         //reset all the opacity to full and remove effect class
-        $(this).children().fadeTo('100', '1.0').removeClass('effect');      
+        jQuery(this).children().fadeTo('100', '1.0').removeClass('effect');      
     });
      
 });
-$(document).ready(function() {
-var max_dim_width = 0;
-var max_dim_height = 0;
-  $(".item img").each(function () {
-    if (jQuery(this).height() > max_dim_height)
-      max_dim_height = jQuery(this).height() + 10;
-    if (jQuery(this).width() > max_dim_width)
-      max_dim_width = jQuery(this).width() + 10;
-
-    jQuery(".item, .item img")
-      .css('width', max_dim_width+'px')
-      .css('height', max_dim_height+'px');
-  });
-});
 
 {/literal}{/footer_script}
+{define_derivative name='spotlight' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true}
+
 <div id="items">
 {foreach from=$category_thumbnails item=cat}
-			<a href="{$cat.URL}" class="item" title="{$cat.NAME|@replace:'"':' '}{if not empty($cat.DESCRIPTION)} - {$cat.DESCRIPTION|@replace:'"':' '}{/if}">
-				<img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" >
-			</a>
+{assign var=derivative value=$pwg->derivative($spotlight, $cat.representative.src_image)}
+  <a href="{$cat.URL}" class="item" title="{$cat.NAME|@replace:'"':' '}{if not empty($cat.DESCRIPTION)} - {$cat.DESCRIPTION|@replace:'"':' '}{/if}" style="{assign var=sz value=$derivative->get_size()}width:{$sz[0]}px;height:{$sz[1]}px">
+    <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" {$derivative->get_size_htm()}>
+  </a>
 {/foreach}
 </div>
Index: /extensions/flop_style/thumbnails/fancy_hover.tpl
===================================================================
--- /extensions/flop_style/thumbnails/fancy_hover.tpl	(revision 16500)
+++ /extensions/flop_style/thumbnails/fancy_hover.tpl	(revision 16501)
@@ -1,9 +1,11 @@
 {combine_css path="template-extension/flop_style/thumbnails/fancy_hover.css"}
 {combine_script id='jquery' path='themes/default/js/jquery.min.js'}
+{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'}
 {define_derivative name='derivative_fh' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true}
 {html_head}
   {literal}
 <script type="text/javascript">
-$(document).ready(function(){ 
+jQuery(document).ready(function(){ 
 $("ul.thumbnails li").hover(function() {
 	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
@@ -50,7 +52,8 @@
 {if !empty($thumbnails)}
 {strip}{foreach from=$thumbnails item=thumbnail}
+{assign var=derivative value=$pwg->derivative($derivative_fh, $thumbnail.src_image)}
 	<li>
     <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
-      <img src="{$pwg->derivative_url($derivative_fh, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
+      <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
     </a>
 	</li>
Index: /extensions/flop_style/thumbnails/jPolaroid.tpl
===================================================================
--- /extensions/flop_style/thumbnails/jPolaroid.tpl	(revision 16500)
+++ /extensions/flop_style/thumbnails/jPolaroid.tpl	(revision 16501)
@@ -2,4 +2,6 @@
 {combine_css path="template-extension/flop_style/mainpage_categories/jPolaroid/jpolaroid.minified.css"}
 {combine_script id="jquery.jpolaroid.minified" load="header" path="template-extension/flop_style/mainpage_categories/jPolaroid/jquery.jpolaroid.min.js"}
+{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'}
 {html_head}
   {literal}
@@ -32,8 +34,9 @@
 {if !empty($thumbnails)}
 {strip}{foreach from=$thumbnails item=thumbnail}
+{assign var=derivative value=$pwg->derivative($derivative_jPolaroid, $thumbnail.src_image)}
 	<li>
-			<a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
-				<img src="{$pwg->derivative_url($derivative_jPolaroid, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
-			</a>
+    <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
+      <img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if} class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
+    </a>
 	</li>
 {/foreach}{/strip}
Index: /extensions/flop_style/thumbnails/polaroid.tpl
===================================================================
--- /extensions/flop_style/thumbnails/polaroid.tpl	(revision 16500)
+++ /extensions/flop_style/thumbnails/polaroid.tpl	(revision 16501)
@@ -1,3 +1,5 @@
 {combine_css path="template-extension/flop_style/thumbnails/polaroid.css"}
+{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'}
 {html_style}{literal}
 ul.thumbnails a {
@@ -14,7 +16,8 @@
 {if !empty($thumbnails)}
 {strip}{foreach from=$thumbnails item=thumbnail}
+{assign var=derivative value=$pwg->derivative($derivative_polaroid, $thumbnail.src_image)}
 	<li>
-			<a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
-				<img src="{$pwg->derivative_url($derivative_polaroid, $thumbnail.src_image)}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
+			<a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:20:" [...]"|@replace:'"':' '}{/if}">
+				<img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-big.gif" data-src="{$derivative->get_url()}"{/if}  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
 			</a>
 	</li>
