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

});