Mercurial > sat_legacy_website
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 %} |