Commit 70159c2b authored by fred's avatar fred
Browse files

display picture legends

parent 81bffb26
......@@ -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 {
......
......@@ -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;
});
......
......@@ -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 %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment