--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_website/templates/sat_website/gallery.html	Tue Oct 17 04:11:21 2017 +0200
@@ -0,0 +1,127 @@
+{% comment %}
+SàT website: Salut à Toi's presentation website
+Copyright (C) 2012  Jérôme Poisson (goffi@goffi.org)
+
+This file is part of SàT website.
+
+SàT website is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Foobar is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Foobar.  If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+
+{% load i18n %}
+{% load staticfiles %}
+{% load utils %}
+
+<div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
+    {% if media|length > 9 %}
+        <ol class="carousel-indicators">
+            {% for row in media|buffer:9 %}
+                <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+            {% endfor %}
+        </ol>
+    {% endif %}
+    <div class="carousel-inner" role="listbox">
+        {% for row in media|buffer:9 %}
+            <div class="item{% if not forloop.counter0 %} active{% endif %}">
+            {% for entry in row %}
+                <div class="col-md-4">
+                    {% if entry.poster %}
+                        <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none">
+                            {% 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 %}
+	                    </video>
+                    {% else %}
+                        <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}">
+                    {% endif %}
+                </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+        {% if media|length > 9 %}
+	        <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
+	          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+	          <span class="sr-only">Previous</span>
+	        </a>
+	        <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
+	          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+	          <span class="sr-only">Next</span>
+	        </a>
+        {% endif %}
+    </div>
+</div>
+
+<div class="modal my-modal" id="modal-{{ name }}" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button class="close" type="button" data-dismiss="modal">×</button>
+            </div>
+            <div class="modal-body">
+                <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
+                    {% if media|length > 1 %}
+                        <ol class="carousel-indicators">
+                            {% for entry in media %}
+                                <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                            {% endfor %}
+                        </ol>
+                    {% endif %}
+                    <div class="carousel-inner" role="listbox">
+                        {% for entry in media %}
+                            <div class="item{% if not forloop.counter0 %} active{% endif %}">
+                                {% if entry.poster %}
+                                    {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %}
+                                {% else %}
+                                    <img class="img-responsive" src="{% static entry.path %}">                            
+                                {% endif %}
+                                <div class="carousel-caption">
+                                    {{ entry.description }}<br/>
+                                    {{ entry|metadata }}
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                    {% if media|length > 1 %}
+	                    <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
+	                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+	                        <span class="sr-only">Previous</span>
+	                    </a>
+	                    <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
+	                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+	                        <span class="sr-only">Next</span>
+	                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+$(document).ready(function() {
+    // open the big gallery when a thumbnail is clicked
+    $('#carousel-{{ name }} .thumbnail').click(function() {
+        $('#modal-{{ name }}').modal('show');
+        index = parseInt($(this).attr('index'));
+        $('#carousel-{{ name }}-modal').carousel(index);
+        // start playing the big video
+        if ($(this)[0].tagName == 'VIDEO') {
+           $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
+        }
+    });
+    
+    // thumbail's video starts playing when clicked, pause it
+    $('#carousel-{{ name }} video.thumbnail').each(function(index) {
+        $(this).on('play', function(e) { $(this)[0].pause(); });
+    });
+
+});
+</script>
\ No newline at end of file