Mercurial > sat_legacy_website
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/js/sat_website.js Wed Jan 21 20:13:19 2015 +0100 @@ -0,0 +1,24 @@ +$(document).ready(function() { + + // language selector + $('#language_select').change(function() { + $('#language_form').submit(); + }); + + // open the big gallery when a thumbnail is clicked + $('#carousel-screenshots .thumbnail').click(function() { + $('#modal-screenshots').modal('show'); + index = parseInt($(this).attr('index')); + $('#carousel-screenshots-modal').carousel(index); + // start playing the big video + if ($(this)[0].tagName == 'VIDEO') { + $('#carousel-screenshots-modal img, #carousel-screenshots-modal video')[index].play(); + } + }); + + // thumbail's video starts playing when clicked, pause it + $('#carousel-screenshots video.thumbnail').each(function(index) { + $(this).on('play', function(e) { $(this)[0].pause(); }); + }); + +});