--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/sat_website/gallery.html	Wed Jan 21 20:13:19 2015 +0100
@@ -0,0 +1,105 @@
+{% 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-screenshots" class="carousel slide" data-ride="carousel" data-interval="0">
+    {% if screenshots|length > 9 %}
+        <ol class="carousel-indicators">
+            {% for row in screenshots|buffer:9 %}
+                <li data-target="#carousel-screenshots" 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 screenshots|buffer:9 %}
+            <div class="item{% if not forloop.counter0 %} active{% endif %}">
+            {% for screenshot in row %}
+                <div class="col-md-4">
+                    {% if screenshot.poster %}
+	                    <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
+	                    {% 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 %}
+	                    </video>
+                    {% else %}
+                        <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static screenshot.path %}">
+                    {% endif %}
+                </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+        {% if screenshots|length > 9 %}
+	        <a class="left carousel-control" href="#carousel-screenshots" 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-screenshots" 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" id="modal-screenshots" 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-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0">
+                    {% if screenshots|length > 1 %}
+                        <ol class="carousel-indicators">
+                            {% for screenshot in screenshots %}
+                                <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                            {% endfor %}
+                        </ol>
+                    {% endif %}
+                    <div class="carousel-inner" role="listbox">
+                        {% for screenshot in screenshots %}
+                            <div class="item{% if not forloop.counter0 %} active{% endif %}">
+                                {% if screenshot.poster %}
+	                                <video class="img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
+	                                {% 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 %}
+	                                </video>
+                                {% else %}
+                                    <img class="img-responsive" src="{% static screenshot.path %}">                            
+                                {% endif %}
+                                <div class="carousel-caption">{{ screenshot.description }}</div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                    {% if screenshots|length > 1 %}
+	                    <a class="left carousel-control" href="#carousel-screenshots-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-screenshots-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>