comparison templates/sat_website/screenshots.html @ 29:b45621706d83

use Bootstrap carousels to display images and videos galeries: - one carousel for a 3x3 thumbnails grid - a second one in a modal window to view bigger pictures when a thumbnail is clicked
author souliane <souliane@mailoo.org>
date Wed, 21 Jan 2015 20:13:19 +0100
parents 3df49721008c
children 10ce34ab389a
comparison
equal deleted inserted replaced
28:30a1edf90fae 29:b45621706d83
19 You should have received a copy of the GNU Affero General Public License 19 You should have received a copy of the GNU Affero General Public License
20 along with Foobar. If not, see <http://www.gnu.org/licenses/>. 20 along with Foobar. If not, see <http://www.gnu.org/licenses/>.
21 {% endcomment %} 21 {% endcomment %}
22 22
23 {% load i18n %} 23 {% load i18n %}
24 {% load staticfiles %} 24 {% block headline %}{% trans "Screenshots and videos..." %}{% endblock %}
25 {% load partition %} 25 {% block main_container %}
26 26
27 {% block headline %}{% trans "Some screenshots..." %}{% endblock %} 27 {% include "sat_website/gallery.html" %}
28 {% block extra %}
29 <div class="btn-group">
30 <a class="btn btn-default btn-info" href="#screenshots">{% trans "screenshots" %}</a>
31 <a class="btn btn-default btn-primary" href="#screencasts">{% trans "screencasts" %}</a>
32 </div>
33 {% endblock %} 28 {% endblock %}
34 {% block main_container %}
35 <a name="screenshots"><h3>{% trans "Screenshots" %}</h3></a>
36 <div class="row">
37 {% for row in screenshots|columns:3 %}
38 {% for screenshot in row %}
39 <div class="col-md-4">
40 <a href="{% static screenshot.path %}" class="thumbnail">
41 <img src="{% static screenshot.path %}" alt="{{ screenshot.description }}">
42 </a>
43 <div class="screenshot_desc">
44 {{ screenshot.description }}
45 </div>
46 </div>
47
48 {% endfor %}
49 </ul>
50 {% endfor %}
51 </div>
52 <a name="screencasts"><h3>{% trans "Screencasts" %}</h3></a>
53 {% for screencast in screencasts %}
54 <div class="row">
55 <div class="col-md-10 col-md-offset-1">
56 <div class="screencast">
57 <video width="640" height="400" poster="{% static screencast.poster %}" controls="controls" src="{% static screencast.path %}" preload="none">
58 {% 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 %}
59 </video>
60 </div>
61 <div class="screencast_dest">
62 {{ screencast.description }}
63 </div>
64 </div>
65 </div>
66 {% endfor %}
67 {% endblock %}