pdnew/themes/default/templates/renderable/gallery.html

91 lines
3.7 KiB
HTML

{% extends 'default/templates/renderable/administerable.html' %}
{% block content %}
<div class="gallery-preview">
{% for item in content.items_ordered %}
<a href="#gallery-{{ content.name }}-item-{{ loop.index }}">
<div class="gallery-item-preview">
<img
class="preview"
src="{{ item.image.url('raw') }}"
{% if item.description %}
alt="{{ item.description }}"
title="{{ item.description }}"
{% elif item.image.description %}
alt="{{ item.image.description }}"
title="{{ item.image.description }}"
{% endif %}
/>
</div>
</a>
{% endfor %}
</div>
<div id="gallery-{{ content.name }}" class="modal">
<a href="#__close"></a>
{% for item in content.items_ordered %}
<div id="gallery-{{ content.name }}-item-{{ loop.index }}" class="gallery-item">
{% set idx = loop.index %}
<div class="gallery-item-image">
<img
src="{{ item.image.url('raw') }}"
{% if item.description %}
alt="{{ item.description }}"
title="{{ item.description }}"
{% elif item.image.description %}
alt="{{ item.image.description }}"
title="{{ item.image.description }}"
{% endif %}
/>
{% if item.description %}
<div class="description">{{ item.description.render() }}</div>
{% elif item.image.description %}
<div class="description">{{ item.image.description.render() }}</div>
{% endif %}
<nav class="gallery-arrows">
<ul>
{% if not loop.first %}
<li><a class="previous" title="Previous picture" href="#gallery-{{ content.name }}-item-{{ idx - 1 }}"></a></li>
{% endif %}
{% if not loop.last %}
<li><a class="next" title="Next picture" href="#gallery-{{ content.name }}-item-{{ idx + 1 }}"></a></li>
{% endif %}
</ul>
</nav>
</div>
<div class="gallery-preview">
{% for item in content.items_ordered %}
<a href="#gallery-{{ content.name }}-item-{{ loop.index }}">
<div class="gallery-item-preview{% if loop.index == idx %} active{% endif %}">
<img
class="preview"
src="{{ item.image.url('raw') }}"
{% if item.description %}
alt="{{ item.description }}"
title="{{ item.description }}"
{% elif item.image.description %}
alt="{{ item.image.description }}"
title="{{ item.image.description }}"
{% endif %}
/>
</div>
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endblock %}