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
|
let modalId = $('#image-gallery');
$(document)
.ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image')
.show();
if (counter_max === counter_current) {
$('#show-next-image')
.hide();
} else if (counter_current === 1) {
$('#show-previous-image')
.hide();
}
}
/**
*
* @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
* @param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr) {
let current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image')
.click(function () {
if ($(this)
.attr('id') === 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
let $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-title')
.text($sel.data('title'));
$('#image-gallery-image')
.attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]')
.each(function () {
counter++;
$(this)
.attr('data-image-id', counter);
});
}
$(setClickAttr)
.on('click', function () {
updateGallery($(this));
});
}
});
// build key actions
$(document)
.keydown(function (e) {
switch (e.which) {
case 37: // left
if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
$('#show-previous-image')
.click();
}
break;
case 39: // right
if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
$('#show-next-image')
.click();
}
break;
default:
return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
|
