Optimisation du chargement des vignettes juxtaposées à celle affichée.

[Portfolio.git] / skins / photo_layout_macros.pt

diff --git a/skins/photo_layout_macros.pt b/skins/photo_layout_macros.pt
index 1ca17fa..21616da 100644 (file)
--- a/skins/photo_layout_macros.pt
+++ b/skins/photo_layout_macros.pt
@@ -11,9 +11,8 @@
                      mayBeDropable exists:dropable;
                      dropable python:True if mayBeDropable and dropable else False"
          i18n:domain="portfolio">
-      <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
       <div id="lightbox" tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
-        <span tal:repeat="info infos" tal:omit-tag="">
+        <span metal:define-macro="thumbnails" tal:repeat="info infos" tal:omit-tag="">
           <span tal:define="size info/thumbSize;
                             margin_top python:(slide_size - size['height']) / 2;
                             margin_left python:(slide_size - size['width']) / 2;
@@ -66,7 +65,7 @@
                      i18n:attributes="alt"/>
               </a>
             </span>
-            <span class="button cb">
+            <span class="button cb" tal:condition="features/checkbox|nothing">
               <input type="checkbox" name="uids:list"
                      tal:attributes="value info/cmf_uid"/>
             </span>
@@ -102,16 +101,24 @@
         </span>
       </div>
       <br clear="all"/>
-      <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
-      <script type="text/javascript" tal:condition="not:dropable">
-        new Lightbox(document.getElementById('lightbox'));
+      <noscript>
+        <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
+      </noscript>
+      <script type="text/javascript" tal:condition="not:dropable"
+              tal:content="structure python:'''
+              new Lightbox(document.getElementById('lightbox'),
+                           document.getElementById('lightbox_toolbar'),
+                           %s);
+                           ''' % ('true' if not batch.next else 'false')">
       </script>
       <script type="text/javascript"
               tal:condition="dropable"
               tal:content="structure python:'''
               (function(){
                 var lb = document.getElementById('lightbox');
-                new Lightbox(lb);
+                new Lightbox(lb,
+                             document.getElementById('lightbox_toolbar'),
+                             %(complete)s);
                 var uploadUrl = '%(putUrl)s';
                 var options = {'slideSize' : %(slideSize)d,
                                'thumbnailSize' : %(thumbnailSize)d};
@@ -119,20 +126,22 @@
               })();
               ''' % {'putUrl' : '%s/put_upload' % here.absolute_url(),
                      'slideSize' : portal_object.slide_size,
-                     'thumbnailSize' : portal_object.thumb_size}">
+                     'thumbnailSize' : portal_object.thumb_size,
+                     'complete': 'true' if not batch.next else 'false'}">
       </script>
     </div>
     <div metal:define-macro="film_bar" tal:omit-tag="">
       <div id="film_bar">
         <table cellspacing="0">
-          <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10">
+          <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10;
+                          blank_img string:$portal_url/transparent.gif">
             <td tal:repeat="info contextInfos/infos">
               <a tal:attributes="href info/href;
                                  class info/className;
                                  portfolio:position info/index">
                 <img tal:define="size info/thumbSize;
                                  margin_top python:(slide_size - size['height']) / 2"
-                     tal:attributes="src info/src;
+                     tal:attributes="src python:info['src'] if info['displayed'] else blank_img;
                                      alt info/title;
                                      height size/height;
                                      width size/width;