Mercurial > sat_legacy_website
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 }); |