-
Notifications
You must be signed in to change notification settings - Fork 30
/
modal.js
66 lines (59 loc) · 2.3 KB
/
modal.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
//Use an IIFE to avoid contanminating global namespce
(function(){
//Grab stores items from the DOM
let storeItems = document.querySelectorAll('.store-item');
//grab lightbox container
let lightBox = document.querySelector('.lightbox-container');
//grab the div with the lightbox item
let lightBoxItem = document.querySelector('.lightbox-item');
//grab all the images from the store items
let images = document.querySelectorAll('.store-img');
// set up an array for the items
let imageList = [];
//set up a counter to run through the list of images
let imageCounter = 0;
//use a forEach loop to get a copy of all the images and push into an array of items
images.forEach(function(image){
//push each imageto the array of images
imageList.push(image.src);
})
//Add an a click event listener to each store item
storeItems.forEach(function(item) {
//On click, allow the model container to show
//Change css class from display none to display block
item.addEventListener('click', function(e){
//grab the image of the item that was clicked
let image = e.target.src;
//change the background img property of the lightbox item
lightBoxItem.style.backgroundImage = `url(${image})`;
//show the modal with the selected image
lightBox.classList.add('show');
//get the array index number for the image that was selected
imageCounter = imageList.indexOf(image);
});
});
//wire up the left and right buttons
//select left button from the DOM
let btnLeft = document.querySelector('.btnLeft');
btnLeft.addEventListener('click', function(){
imageCounter--;
if (imageCounter < 0){
imageCounter = imageList.length -1;
}
lightBoxItem.style.backgroundImage = `url(${imageList[imageCounter]})`
});
//select left button from the DOM
let btnRight = document.querySelector('.btnRight');
btnRight.addEventListener('click', function(){
imageCounter++;
if (imageCounter >= imageList.length){
imageCounter = 0;
}
lightBoxItem.style.backgroundImage = `url(${imageList[imageCounter]})`;
});
//wire up the modal's close button
let lightBoxClose = document.querySelector('.lightbox-close');
lightBoxClose.addEventListener('click', function(){
lightBox.classList.remove('show');
});
})();