Multisize and mobile theme.

Use ajax loader for thumbnails in mobile theme.
Use standard square parameters for mobile theme.
Change square parameters to 120px.

git-svn-id: http://piwigo.org/svn/trunk@13472 68402e56-0260-453c-a942-63ccdbb3a9ee

3 files changed, 30 insertions, 29 deletions

diff --git a/themes/smartpocket/js/smartpocket.js b/themes/smartpocket/js/smartpocket.js
new file mode 100644
index 000000000..ab7874453
--- /dev/null
+++ b/themes/smartpocket/js/smartpocket.js
@@ -0,0 +1,17 @@
+(function(window, $, PhotoSwipe){

+  $(document).ready(function(){

+    var options = {

+      jQueryMobile: true,

+      imageScaleMethod: "fitNoUpscale"

+    };

+    $(".thumbnails a").photoSwipe(options);

+    $(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+'%');

+}
\ No newline at end of file
diff --git a/themes/smartpocket/template/mainpage_categories.tpl b/themes/smartpocket/template/mainpage_categories.tpl
index 18485172f..54a99ba4d 100644
--- a/themes/smartpocket/template/mainpage_categories.tpl
+++ b/themes/smartpocket/template/mainpage_categories.tpl
@@ -1,10 +1,10 @@
-{define_derivative name='derivative_params' width=120 height=120 crop=true}

+{define_derivative name='derivative_params_square' type='square'}

 

 <ul data-role="listview" data-inset="true">

 {foreach from=$category_thumbnails item=cat}

 	<li>

 		<a href="{$cat.URL}">

-		<img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}">

+		<img src="{$pwg->derivative_url($derivative_params_square, $cat.representative.src_image)}">

     <h3>{$cat.NAME}</h3>

 		<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>

 		</a>

diff --git a/themes/smartpocket/template/thumbnails.tpl b/themes/smartpocket/template/thumbnails.tpl
index acd20af19..6ac7e7e8b 100644
--- a/themes/smartpocket/template/thumbnails.tpl
+++ b/themes/smartpocket/template/thumbnails.tpl
@@ -1,41 +1,25 @@
 {if !empty($thumbnails)}

 {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'}

 

-{define_derivative name='derivative_params_thumb' width=120 height=120 crop=true}

-{define_derivative name='derivative_params_full' type='large'}

+{define_derivative name='derivative_params_square' type='square'}

+{define_derivative name='derivative_params_large' type='large'}

 

-{footer_script}{literal}

-(function(window, $, PhotoSwipe){

-  $(document).ready(function(){

-    var options = {

-      jQueryMobile: true,

-      imageScaleMethod: "fitNoUpscale"

-    };

-    $(".thumbnails a").photoSwipe(options);

-    $(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}

 <ul class="thumbnails">

 {foreach from=$thumbnails item=thumbnail}{strip}

+{assign var=derivative value=$pwg->derivative($derivative_params_square, $thumbnail.src_image)}

 {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}">

+  <li>

+    <a href="{$pwg->derivative_url($derivative_params_large, $thumbnail.src_image)}" rel="external">

+     <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">

     </a>

   </li>

 {else}

-	<li style="display:none;">

-	  <a href="{$pwg->derivative_url($derivative_params_full, $thumbnail.src_image)}" rel="external"></a>

+  <li style="display:none;">

+    <a href="{$pwg->derivative_url($derivative_params_large, $thumbnail.src_image)}" rel="external"></a>

   </li>

 {/if}

 {/strip}{/foreach}