display picture legends

diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
index fcceca3944a6679c969b3f3e581541773a146b6f..8fba570023b1cdd86f77b881320a80d6aea28645 100644 (file)
--- a/panikweb_templates/static/css/specifics.css
+++ b/panikweb_templates/static/css/specifics.css
@@ -1652,6 +1652,7 @@ div.gallery div.first {
 
 div.gallery div.first img {
        padding: 5px;
+       padding-bottom: 25px;
        margin-top: -240px;
        margin-left: -320px;
        position: absolute;
@@ -1670,6 +1671,21 @@ div.gallery {
        border-bottom: 1px solid #ccc;
 }
 
+div.gallery span.gallery-legend {
+       display: inline-block;
+       position: absolute;
+       top: 50%;
+       margin-top: 250px;
+       left: 0%;
+       width: 100%;
+       color: #000;
+       z-index: 1000;
+}
+
+div.portrait div.gallery span.gallery-legend {
+       margin-top: 330px;
+}
+
 @media screen and (max-width: 640px) {
        div.portrait div.gallery div.first img,
        div.gallery div.first img {

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index d80db5189bad7acbdd4389eea4859ed4f7effd97..679cab9220a16aa442e52bfc0feff520ddc2a9ab 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -529,8 +529,14 @@ $(function() {
 
                $('.gallery').each(function() {
                  var $gallery = $(this);
-                 $gallery.find('span').on('click', function() {
+                 $gallery.find('span.image').on('click', function() {
+                   if ($(this).find('img').hasClass('portrait')) {
+                       $(this).parents('.gallerycell').addClass('portrait');
+                   } else {
+                       $(this).parents('.gallerycell').removeClass('portrait');
+                   }
                    $gallery.find('div.first img').attr('src', $(this).data('image-large'));
+                   $gallery.find('div.first span.gallery-legend').text($(this).find('img').attr('title'));
                    $gallery.find('div.first').show('fade');
                    return false;
                  });
@@ -602,6 +608,18 @@ $(function() {
          $(new_img).css('transform', 'scale(0, 1)');
          $(new_img)[0].offsetHeight; /* trigger reflow */
          $(new_img).css('opacity', 1).css('transform', 'scale(1)');
+         $(new_img).parents('.gallery').find('span.gallery-legend').text($(all_img[idx]).attr('title'));
+         if ($(all_img[idx]).hasClass('portrait')) {
+           if (! $(new_img).parents('.gallerycell').hasClass('portrait')) {
+             $visible_element.parent().find('img:not(:last)').remove();
+             $(new_img).parents('.gallerycell').addClass('portrait');
+           }
+         } else {
+           if ($(new_img).parents('.gallerycell').hasClass('portrait')) {
+             $visible_element.parent().find('img:not(:last)').remove();
+             $(new_img).parents('.gallerycell').removeClass('portrait');
+           }
+         }
          return false;
        });
 

diff --git a/panikweb_templates/templates/combo/gallery.html b/panikweb_templates/templates/combo/gallery.html
index 6ff1466b25d02888cff6592be40d154908cfe0e8..49451a96643d81a480042e482e8bdcc81908c477 100644 (file)
--- a/panikweb_templates/templates/combo/gallery.html
+++ b/panikweb_templates/templates/combo/gallery.html
@@ -5,18 +5,19 @@
   {% if forloop.first %}
 <div class="first" style="display: none;">
 <img src="#"/>
+<span class="gallery-legend"></span>
 </div>
 <div>
   {% endif %}
 {% thumbnail image.image "200x100" crop="50% 25%" as im %}
 {% if cell.slug == 'portrait' %}
 {% thumbnail image.image "480x640" crop="50% 25%" as im_large %}
-<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
-        {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+        class="portrait" {% if image.title %} title="{{image.title}}" {% endif %}/></span>
 {% endthumbnail %}
 {% else %}
 {% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
-<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
         {% if image.title %} title="{{image.title}}" {% endif %}/></span>
 {% endthumbnail %}