/
slick-fullscreen.js
121 lines (97 loc) · 2.64 KB
/
slick-fullscreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
(function(window, $) {
var slickFullscreen = {
defaults: {
target: 'a',
closeIcon: true,
closeOnEsc: true,
closeOnBackdrop: false,
slick: {}
},
/**
* Open full screen slick slider.
*
* @param {jQuery} $slides
* @param {object} options
* @return {void}
*/
open: function($slides, options) {
options = $.extend({}, this.defaults, options);
// Create new versions of the slides.
var clonedSlides = [];
$slides.each(function() {
clonedSlides.push('<div><img src="' + slickFullscreen.getImageSource($(this)) + '"></div>');
});
var $container = $('<div class="slick-fullscreen">' + clonedSlides.join('') + '</div>');
$('body').append($container);
$container.slick(options.slick);
if (options.closeIcon) {
var $closeIcon = $('<span class="slick-fullscreen-close">X</span>');
$closeIcon.on('click', function() {
slickFullscreen.close();
});
$container.prepend($closeIcon);
}
$container.find('.slick-track').on('click.slick-fullscreen', '.slick-slide img', function(event) {
event.stopPropagation();
$container.slick('slickNext');
});
if (options.closeOnBackdrop) {
$container.find('.slick-track').on('click.slick-fullscreen', function() {
slickFullscreen.close();
});
}
if (options.closeOnEsc) {
$(document).on('keyup.slick-fullscreen', function(event) {
// Escape
if (event.keyCode == 27) {
slickFullscreen.close();
}
});
}
this.options = options;
this.$container = $container;
},
/**
* Get the source to the image.
*
* @param {jQuery} $element
* @return {string}
*/
getImageSource: function($element) {
if ($element.is('img')) {
return $element.attr('src');
}
return $element.attr('href');
},
/**
* Close fullscreen slick.
*
* @return {void}
*/
close: function() {
this.unbindEvents();
this.$container.slick('unslick');
this.$container.remove();
},
/**
* Unbind events.
*
* @return {void}
*/
unbindEvents: function() {
$(document).off('.slick-fullscreen');
this.$container.find('.slick-track').off('.slick-fullscreen');
}
};
$('[data-slick-fullscreen]').each(function() {
var options = $(this).data('slick-fullscreen') || {};
var $targets = $(options.target || slickFullscreen.defaults.target, this);
$targets.on('click', function(event) {
event.preventDefault();
var slickOptions = options.slick || {};
slickOptions.initialSlide = $(this).index();
slickFullscreen.open($targets, $.extend({}, options, { slick: slickOptions }));
});
});
window.slickFullscreen = slickFullscreen;
})(window, jQuery);