1 files changed, 25 insertions, 19 deletions
diff --git a/themes/smartpocket/template/thumbnails.tpl b/themes/smartpocket/template/thumbnails.tpl
index f4e56e570..f8d4fba6e 100644
--- a/themes/smartpocket/template/thumbnails.tpl
+++ b/themes/smartpocket/template/thumbnails.tpl
@@ -1,33 +1,39 @@
 {if !empty($thumbnails)}
+{$row_height=216}
+{$hmargin=4}
+{$vmargin=5}
+{$container_margin=-10}
+
 {combine_script id='klass' path='themes/smartpocket/js/klass.min.js'}
 {combine_script id='photoswipe' path='themes/smartpocket/js/code.photoswipe.jquery.min.js' require='klass,jquery.mobile'}
 {combine_script id='smartpocket' path='themes/smartpocket/js/smartpocket.js' require='photoswipe'}
-{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='sp.thumb.arrange' path='themes/smartpocket/js/thumb.arrange.js' require='jquery' load='footer'}
 {footer_script}
-  var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}", var_thumb_width={$thumbnail_derivative_params->max_width()};
+var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}";
+var SPThumbsOpts ={ hMargin:{$hmargin},rowHeight:{$row_height}};
 {/footer_script}
-
+{$thumb_picker->init($row_height)}
+{html_style}
+.thumbnails .liEmpty{ display:none}
+.thumbnails LI{ margin-left:{$hmargin}px; margin-bottom:{$vmargin}px}
+.thumbnails { margin:0 {$container_margin}px 0 {$container_margin-$hmargin}px}
+{/html_style}
 <ul class="thumbnails">
 {foreach from=$thumbnails item=thumbnail}{strip}
-{assign var=derivative value=$pwg->derivative($thumbnail_derivative_params, $thumbnail.src_image)}
+{$derivative=$thumb_picker->pick($thumbnail.src_image)}
 {if isset($page_selection[$thumbnail.id]) and !isset($thumbnail.representative_ext)}
-  <li>
-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">
-     <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">
-    </a>
-  </li>
-{elseif isset($thumbnail.representative_ext)}
-  <li>
-    <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
-     <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">
-    </a>
-  </li>
+	<li class="liVisible">
+{if !isset($thumbnail.representative_ext)}
+		<a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">
+{else}
+		<a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">
+{/if}
+		 <img src="{$derivative->get_url()}" {$derivative->get_size_htm()} alt="{$thumbnail.TN_ALT}">
 {else}
-  <li style="display:none;">
-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external"></a>
-  </li>
+	<li class="liEmpty">
+		<a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external">
 {/if}
+	</a></li>
 {/strip}{/foreach}
 </ul>
 {/if}