Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 29:b45621706d83

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use Bootstrap carousels to display images and videos galeries: - one carousel for a 3x3 thumbnails grid - a second one in a modal window to view bigger pictures when a thumbnail is clicked
author souliane <souliane@mailoo.org>
date Wed, 21 Jan 2015 20:13:19 +0100
parents
children 565d653a15d3
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
1 {% comment %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
2 SàT website: Salut à Toi's presentation website
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
3 Copyright (C) 2012 Jérôme Poisson (goffi@goffi.org)
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
4
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
5 This file is part of SàT website.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
6
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
7 SàT website is free software: you can redistribute it and/or modify
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
8 it under the terms of the GNU Affero General Public License as published by
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
9 the Free Software Foundation, either version 3 of the License, or
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
10 (at your option) any later version.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
11
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
12 Foobar is distributed in the hope that it will be useful,
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
13 but WITHOUT ANY WARRANTY; without even the implied warranty of
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
14 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
15 GNU Affero General Public License for more details.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
16
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
17 You should have received a copy of the GNU Affero General Public License
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
18 along with Foobar. If not, see <http://www.gnu.org/licenses/>.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
19 {% endcomment %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
20
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
21 {% load i18n %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
22 {% load staticfiles %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
23 {% load utils %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
24
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
25 <div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
26 {% if screenshots|length > 9 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
27 <ol class="carousel-indicators">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
28 {% for row in screenshots|buffer:9 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
29 <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
30 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
31 </ol>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
32 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
33 <div class="carousel-inner" role="listbox">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
34 {% for row in screenshots|buffer:9 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
35 <div class="item{% if not forloop.counter0 %} active{% endif %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
36 {% for screenshot in row %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
37 <div class="col-md-4">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
38 {% if screenshot.poster %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
39 <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
40 {% blocktrans with firefox="<a href=\"http://www.mozilla-europe.org/fr/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
41 </video>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
42 {% else %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
43 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static screenshot.path %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
44 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
45 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
46 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
47 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
48 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
49 {% if screenshots|length > 9 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
50 <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
51 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
52 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
53 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
54 <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
55 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
56 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
57 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
58 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
59 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
60 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
61
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
62 <div class="modal" id="modal-screenshots" role="dialog">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
63 <div class="modal-dialog">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
64 <div class="modal-content">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
65 <div class="modal-header">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
66 <button class="close" type="button" data-dismiss="modal">×</button>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
67 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
68 <div class="modal-body">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
69 <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
70 {% if screenshots|length > 1 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
71 <ol class="carousel-indicators">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
72 {% for screenshot in screenshots %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
73 <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
74 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
75 </ol>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
76 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
77 <div class="carousel-inner" role="listbox">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
78 {% for screenshot in screenshots %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
79 <div class="item{% if not forloop.counter0 %} active{% endif %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
80 {% if screenshot.poster %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
81 <video class="img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
82 {% blocktrans with firefox="<a href=\"http://www.mozilla-europe.org/fr/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
83 </video>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
84 {% else %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
85 <img class="img-responsive" src="{% static screenshot.path %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
86 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
87 <div class="carousel-caption">{{ screenshot.description }}</div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
88 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
89 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
90 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
91 {% if screenshots|length > 1 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
92 <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
93 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
94 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
95 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
96 <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
97 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
98 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
99 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
100 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
101 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
102 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
103 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
104 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
105 </div>