calibre-web/html/js/main.js

$(window).load(function(){
    //initialize background slideshow
	if(!$('body').hasClass("no-bg-slides")){
        $.vegas('slideshow', {
            delay: 50000,
            backgrounds:[
                { src:'images/slide01.jpg', fade: 1000 },
                { src:'images/slide02.jpg', fade: 1000 },
                { src:'images/slide03.jpg', fade: 1000 },
                { src:'images/slide04.jpg', fade: 1000 }
            ]
        })();
    }

});


$(function() {
    //toggle the slideshow mode
    $('#gallery-swap').click(function(event) {
        if ($('body').hasClass('slideshow')){
            $('body').removeClass('slideshow');

        } else {
            $('body').addClass('slideshow');
        }
    });

    //slideshow naviagaion
    $('.slide-nav li').click(function(event) {
        if ($(this).hasClass('next')) {
            $.vegas('next');
        } else {
            $.vegas('previous');
        }
    });

    $('nav li a').click(function(event) {
        $(this).parents('ul').find('li').removeClass('active');
        $(this).parent('li').addClass('active');
    });

    //keyboard navigation for slideshow.
    //left, right, esc
    $(window).keydown(function(event) {
        if($('body').hasClass('slideshow')) {
            if(event.keyCode==37){
                $.vegas('previous');
            }
            if(event.keyCode==39){
                $.vegas('next');
            }
            if(event.keyCode==27){
                $('body').removeClass('slideshow');
            }
        }
    });

    $('#open-menu').click(function(){
        $('nav').toggleClass('open');
        $('body').toggleClass('open');
    });

    $('header').swipe({
        swipe: function(event, direction, distance, duration, fingers){
            // console.log(direction, distance, event, duration);
            if(direction=="right"){
                $('nav').addClass('open');
                $('body').addClass('open');
            }

            if(direction=="left"){
                $('nav').removeClass('open');
                $('body').removeClass('open');
            }
        }
    });

    $('.magnific').magnificPopup({
        type: 'image',
        mainClass: 'mfp-with-zoom',
        gallery: {
            enabled: true,
            tCounter: '<span class="mfp-counter">%curr%/%total%</span>',
            arrowMarkup: '<button title="%title%" type="button" class="entypo slide-button chevron-thin-%dir%"></button>'
            //arrowMarkup: '<span class="entypo slide-button chevron-thin-%dir%"></span>'
            //<span class="entypo chevron-thin-left"></span>
        },
        zoom: {
            enabled: true, // By default it's false, so don't forget to enable it

            duration: 300, // duration of the effect, in milliseconds
            easing: 'ease-in-out', // CSS transition easing function

            // The "opener" function should return the element from which popup will be zoomed in
            // and to which popup will be scaled down
            // By defailt it looks for an image tag:
            opener: function(openerElement) {
              // openerElement is the element on which popup was initialized, in this case its <a> tag
              // you don't need to add "opener" option if this code matches your needs, it's defailt one.
              return openerElement.is('img') ? openerElement : openerElement.find('img');
            }
        }
    });


});