1 files changed, 18 insertions, 7 deletions
diff --git a/themes/smartpocket/template/thumbnails.tpl b/themes/smartpocket/template/thumbnails.tpl
index 5e33dd0ee..acd20af19 100644
--- a/themes/smartpocket/template/thumbnails.tpl
+++ b/themes/smartpocket/template/thumbnails.tpl
@@ -2,7 +2,7 @@
 {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'}
 
-{define_derivative name='derivative_params_thumb' width=150 height=150 crop=true}
+{define_derivative name='derivative_params_thumb' width=120 height=120 crop=true}
 {define_derivative name='derivative_params_full' type='large'}
 
 {footer_script}{literal}
@@ -10,23 +10,34 @@
   $(document).ready(function(){
     var options = {
       jQueryMobile: true,
-      //allowUserZoom: false,
       imageScaleMethod: "fitNoUpscale"
     };
     $(".thumbnails a").photoSwipe(options);
-    $(".thumbnails img").load(function() { $(this).css('border', '1px solid #3c3c3c') });
+    $(document).bind('orientationchange', set_thumbnails_width);
+    set_thumbnails_width();
   });
 }(window, window.jQuery, window.Code.PhotoSwipe));
+
+function set_thumbnails_width() {
+  nb_thumbs = Math.max(3, Math.ceil($('.thumbnails').width() / 130));
+  width = Math.floor(1000000 / nb_thumbs) / 10000;
+  $('.thumbnails li').css('width', width+'%');
+}
+
 {/literal}{/footer_script}
-<div data-role="content">
 <ul class="thumbnails">
-{foreach from=$thumbnails item=thumbnail}
+{foreach from=$thumbnails item=thumbnail}{strip}
+{if isset($page_selection[$thumbnail.id])}
 	<li>
 	  <a href="{$pwg->derivative_url($derivative_params_full, $thumbnail.src_image)}" rel="external">
       <img src="{$pwg->derivative_url($derivative_params_thumb, $thumbnail.src_image)}" alt="{$thumbnail.TN_ALT}">
     </a>
   </li>
-{/foreach}
+{else}
+	<li style="display:none;">
+	  <a href="{$pwg->derivative_url($derivative_params_full, $thumbnail.src_image)}" rel="external"></a>
+  </li>
+{/if}
+{/strip}{/foreach}
 </ul>
-</div>
 {/if}