Mercurial > sat_legacy_website

comparison sat_website/templates/sat_website/gallery.html @ 149:b1c16cd53b62

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
update django to version 1.11, refactor project structure, better PEP-8 compliance
author souliane <souliane@mailoo.org>
date Tue, 17 Oct 2017 04:11:21 +0200
parents templates/sat_website/gallery.html@7a79cb5ed43b
children ff48d544bfdd
comparison
equal deleted inserted replaced
148:75a95a1dfeb6 149:b1c16cd53b62
1 {% comment %}
2 SàT website: Salut à Toi's presentation website
3 Copyright (C) 2012 Jérôme Poisson (goffi@goffi.org)
4
5 This file is part of SàT website.
6
7 SàT website is free software: you can redistribute it and/or modify
8 it under the terms of the GNU Affero General Public License as published by
9 the Free Software Foundation, either version 3 of the License, or
10 (at your option) any later version.
11
12 Foobar is distributed in the hope that it will be useful,
13 but WITHOUT ANY WARRANTY; without even the implied warranty of
14 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 GNU Affero General Public License for more details.
16
17 You should have received a copy of the GNU Affero General Public License
18 along with Foobar. If not, see <http://www.gnu.org/licenses/>.
19 {% endcomment %}
20
21 {% load i18n %}
22 {% load staticfiles %}
23 {% load utils %}
24
25 <div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
26 {% if media|length > 9 %}
27 <ol class="carousel-indicators">
28 {% for row in media|buffer:9 %}
29 <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
30 {% endfor %}
31 </ol>
32 {% endif %}
33 <div class="carousel-inner" role="listbox">
34 {% for row in media|buffer:9 %}
35 <div class="item{% if not forloop.counter0 %} active{% endif %}">
36 {% for entry in row %}
37 <div class="col-md-4">
38 {% if entry.poster %}
39 <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none">
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 %}
41 </video>
42 {% else %}
43 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}">
44 {% endif %}
45 </div>
46 {% endfor %}
47 </div>
48 {% endfor %}
49 {% if media|length > 9 %}
50 <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
51 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
52 <span class="sr-only">Previous</span>
53 </a>
54 <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
55 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
56 <span class="sr-only">Next</span>
57 </a>
58 {% endif %}
59 </div>
60 </div>
61
62 <div class="modal my-modal" id="modal-{{ name }}" role="dialog">
63 <div class="modal-dialog">
64 <div class="modal-content">
65 <div class="modal-header">
66 <button class="close" type="button" data-dismiss="modal">×</button>
67 </div>
68 <div class="modal-body">
69 <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
70 {% if media|length > 1 %}
71 <ol class="carousel-indicators">
72 {% for entry in media %}
73 <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
74 {% endfor %}
75 </ol>
76 {% endif %}
77 <div class="carousel-inner" role="listbox">
78 {% for entry in media %}
79 <div class="item{% if not forloop.counter0 %} active{% endif %}">
80 {% if entry.poster %}
81 {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %}
82 {% else %}
83 <img class="img-responsive" src="{% static entry.path %}">
84 {% endif %}
85 <div class="carousel-caption">
86 {{ entry.description }}<br/>
87 {{ entry|metadata }}
88 </div>
89 </div>
90 {% endfor %}
91 </div>
92 {% if media|length > 1 %}
93 <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
94 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
95 <span class="sr-only">Previous</span>
96 </a>
97 <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
98 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
99 <span class="sr-only">Next</span>
100 </a>
101 {% endif %}
102 </div>
103 </div>
104 </div>
105 </div>
106 </div>
107
108 <script>
109 $(document).ready(function() {
110 // open the big gallery when a thumbnail is clicked
111 $('#carousel-{{ name }} .thumbnail').click(function() {
112 $('#modal-{{ name }}').modal('show');
113 index = parseInt($(this).attr('index'));
114 $('#carousel-{{ name }}-modal').carousel(index);
115 // start playing the big video
116 if ($(this)[0].tagName == 'VIDEO') {
117 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
118 }
119 });
120
121 // thumbail's video starts playing when clicked, pause it
122 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
123 $(this).on('play', function(e) { $(this)[0].pause(); });
124 });
125
126 });
127 </script>