Mercurial > sat_legacy_website
annotate 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 |
rev | line source |
---|---|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
1 $(document).ready(function() { |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
2 |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
3 // language selector |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
4 $('#language_select').change(function() { |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
5 $('#language_form').submit(); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
6 }); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
7 |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
8 // open the big gallery when a thumbnail is clicked |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
9 $('#carousel-screenshots .thumbnail').click(function() { |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
10 $('#modal-screenshots').modal('show'); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
11 index = parseInt($(this).attr('index')); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
12 $('#carousel-screenshots-modal').carousel(index); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
13 // start playing the big video |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
14 if ($(this)[0].tagName == 'VIDEO') { |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
15 $('#carousel-screenshots-modal img, #carousel-screenshots-modal video')[index].play(); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
16 } |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
17 }); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
18 |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
19 // thumbail's video starts playing when clicked, pause it |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
20 $('#carousel-screenshots video.thumbnail').each(function(index) { |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
21 $(this).on('play', function(e) { $(this)[0].pause(); }); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
22 }); |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
23 |
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff
changeset
|
24 }); |