Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 54:d54f2f09a73a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixes displaying two carousels on the same page
author souliane <souliane@mailoo.org>
date Tue, 05 May 2015 11:03:18 +0200
parents a18800261cf6
children 746e53efc188
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
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
25 <div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
29
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 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
29 <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
29
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">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
40 {% blocktrans with firefox="<a href=\"http://www.mozilla.org/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
29
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 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
50 <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
29
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>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
54 <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
29
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
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
62 <div class="modal my-modal" id="modal-{{ name }}" role="dialog">
29
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">
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
69 <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
29
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 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
73 <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
29
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">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
82 {% blocktrans with firefox="<a href=\"http://www.mozilla.org/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
29
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 %}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
87 <div class="carousel-caption">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
88 {{ screenshot.description }}<br/>
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
89 {{ screenshot.data|metadata }}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
90 </div>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
91 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
92 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
93 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
94 {% if screenshots|length > 1 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
95 <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
96 <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
97 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
98 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
99 <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
100 <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
101 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
102 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
103 {% endif %}
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>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
106 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
107 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
108 </div>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
109
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
110 <script>
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
111 $(document).ready(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
112 // open the big gallery when a thumbnail is clicked
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
113 $('#carousel-{{ name }} .thumbnail').click(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
114 $('#modal-{{ name }}').modal('show');
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
115 index = parseInt($(this).attr('index'));
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
116 $('#carousel-{{ name }}-modal').carousel(index);
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
117 // start playing the big video
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
118 if ($(this)[0].tagName == 'VIDEO') {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
119 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
120 }
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
121 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
122
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
123 // thumbail's video starts playing when clicked, pause it
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
124 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
125 $(this).on('play', function(e) { $(this)[0].pause(); });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
126 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
127
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
128 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
129 </script>