Mercurial > sat_legacy_website
view 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 source
$(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(); }); }); });