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(); });
+    });
+
+});