div.gallery div.first img {
padding: 5px;
+ padding-bottom: 25px;
margin-top: -240px;
margin-left: -320px;
position: absolute;
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 {
$('.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;
});
$(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;
});
{% 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 %}