Mercurial > sat_legacy_website

comparison sat_website/templates/sat_website/gallery.html @ 160:ff48d544bfdd default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
gallery: replaced <video> tag by <img> for videos thumbnails
author Goffi <goffi@goffi.org>
date Sun, 23 Sep 2018 16:41:30 +0200
parents b1c16cd53b62
children
comparison
equal deleted inserted replaced
159:d893828f58f0 160:ff48d544bfdd
34 {% for row in media|buffer:9 %} 34 {% for row in media|buffer:9 %}
35 <div class="item{% if not forloop.counter0 %} active{% endif %}"> 35 <div class="item{% if not forloop.counter0 %} active{% endif %}">
36 {% for entry in row %} 36 {% for entry in row %}
37 <div class="col-md-4"> 37 <div class="col-md-4">
38 {% if entry.poster %} 38 {% if entry.poster %}
39 <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none"> 39 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" src="{{ entry.poster }}" >
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 %} 40 {% else %}
43 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}"> 41 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}">
44 {% endif %} 42 {% endif %}
45 </div> 43 </div>
46 {% endfor %} 44 {% endfor %}
78 {% for entry in media %} 76 {% for entry in media %}
79 <div class="item{% if not forloop.counter0 %} active{% endif %}"> 77 <div class="item{% if not forloop.counter0 %} active{% endif %}">
80 {% if entry.poster %} 78 {% if entry.poster %}
81 {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %} 79 {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %}
82 {% else %} 80 {% else %}
83 <img class="img-responsive" src="{% static entry.path %}"> 81 <img class="img-responsive" src="{% static entry.path %}">
84 {% endif %} 82 {% endif %}
85 <div class="carousel-caption"> 83 <div class="carousel-caption">
86 {{ entry.description }}<br/> 84 {{ entry.description }}<br/>
87 {{ entry|metadata }} 85 {{ entry|metadata }}
88 </div> 86 </div>
115 // start playing the big video 113 // start playing the big video
116 if ($(this)[0].tagName == 'VIDEO') { 114 if ($(this)[0].tagName == 'VIDEO') {
117 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play(); 115 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
118 } 116 }
119 }); 117 });
120 118
121 // thumbail's video starts playing when clicked, pause it 119 // thumbail's video starts playing when clicked, pause it
122 $('#carousel-{{ name }} video.thumbnail').each(function(index) { 120 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
123 $(this).on('play', function(e) { $(this)[0].pause(); }); 121 $(this).on('play', function(e) { $(this)[0].pause(); });
124 }); 122 });
125 123