https://www.ayersbodyshop.com/Scripts/gallery.box.js

1
2var galleryGlobals = {
3    swiper: null
4};
5
6var galleryController = {
7    ready: function () {
8        //initialize swiper when document ready  
9        galleryGlobals.swiper = new Swiper('.swiper-container', {
10            pagination: '.swiper-pagination',
11            nextButton: '.swiper-button-next',
12            prevButton: '.swiper-button-prev',
13            slidesPerView: 1,
14            paginationClickable: true,
15            spaceBetween: 30,
16            loop: true
17        });
18        galleryGlobals.swiper.enableKeyboardControl();
19    },
20    openImage: function (e) {
21        $('.swiper-container').removeClass('slideOutDown');        
22        $('.swiper-container').addClass('active')
23        $('.swiper-container').addClass('slideInUp');
24        var $self = $(this),
25            itemId = $self.attr('data-id'),
26            itemImgUrl = $self.attr('data-img');
27        galleryGlobals.swiper.slideTo(itemId, 0, false);
28    },
29    closeGallery: function (e) {
30        $('.swiper-container').addClass('slideOutDown');
31        setTimeout(function(){
32            $('.swiper-container').removeClass('active');            
33        },700)
34    }
35};
36
37
38
39//EVENTS LISTENERS
40
41function listen(event, target, work) {
42    $(document).on(event, target, work);
43}
44
45$(document).ready(galleryController.ready);
46listen('click', '.gallery-container .gallery-item', galleryController.openImage);
47listen('click', '.closeGallery', galleryController.closeGallery)
48
49//TODO: Refactor this code
50$(document).keydown(function(e) {
51    // ESCAPE key pressed
52    if (e.keyCode == 27) {
53        galleryController.closeGallery(e);
54    }
55});