108 lines
3.4 KiB
JavaScript
Executable File
108 lines
3.4 KiB
JavaScript
Executable File
$(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');
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
});
|