comparison static/js/sat_website.js @ 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
children 9d553570cc61
comparison
equal deleted inserted replaced
28:30a1edf90fae 29:b45621706d83
1 $(document).ready(function() {
2
3 // language selector
4 $('#language_select').change(function() {
5 $('#language_form').submit();
6 });
7
8 // open the big gallery when a thumbnail is clicked
9 $('#carousel-screenshots .thumbnail').click(function() {
10 $('#modal-screenshots').modal('show');
11 index = parseInt($(this).attr('index'));
12 $('#carousel-screenshots-modal').carousel(index);
13 // start playing the big video
14 if ($(this)[0].tagName == 'VIDEO') {
15 $('#carousel-screenshots-modal img, #carousel-screenshots-modal video')[index].play();
16 }
17 });
18
19 // thumbail's video starts playing when clicked, pause it
20 $('#carousel-screenshots video.thumbnail').each(function(index) {
21 $(this).on('play', function(e) { $(this)[0].pause(); });
22 });
23
24 });