Skip to content

Commit 266a1da

Browse files
tnyleatnylea
committed
updating the image gallery to include the photos in an array
1 parent ac14366 commit 266a1da

File tree

1 file changed

+47
-27
lines changed

1 file changed

+47
-27
lines changed

‎elements/image-gallery.html

+47-27
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,48 @@
22
imageGalleryOpened: false,
33
imageGalleryActiveUrl: null,
44
imageGalleryImageIndex: null,
5+
imageGallery: [
6+
{
7+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-01.jpeg',
8+
'alt': 'Photo of Mountains'
9+
},
10+
{
11+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-02.jpeg',
12+
'alt': 'Photo of Mountains 02'
13+
},
14+
{
15+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-03.jpeg',
16+
'alt': 'Photo of Mountains 03'
17+
},
18+
{
19+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-04.jpeg',
20+
'alt': 'Photo of Mountains 04'
21+
},
22+
{
23+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-05.jpeg',
24+
'alt': 'Photo of Mountains 05'
25+
},
26+
{
27+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-06.jpeg',
28+
'alt': 'Photo of Mountains 06'
29+
},
30+
{
31+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-07.jpeg',
32+
'alt': 'Photo of Mountains 07'
33+
},
34+
{
35+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-08.jpeg',
36+
'alt': 'Photo of Mountains 08'
37+
},
38+
{
39+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-09.jpeg',
40+
'alt': 'Photo of Mountains 09'
41+
},
42+
{
43+
'photo': 'https://cdn.devdojo.com/images/june2023/mountains-10.jpeg',
44+
'alt': 'Photo of Mountains 10'
45+
}
46+
],
547
imageGalleryOpen(event) {
648
this.imageGalleryImageIndex = event.target.dataset.index;
749
this.imageGalleryActiveUrl = event.target.src;
@@ -12,20 +54,11 @@
1254
setTimeout(() => this.imageGalleryActiveUrl = null, 300);
1355
},
1456
imageGalleryNext(){
15-
if(this.imageGalleryImageIndex == this.$refs.gallery.childElementCount){
16-
this.imageGalleryImageIndex = 1;
17-
} else {
18-
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) + 1;
19-
}
57+
this.imageGalleryImageIndex = (this.imageGalleryImageIndex == this.imageGallery.length) ? 1 : (parseInt(this.imageGalleryImageIndex) + 1);
2058
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
2159
},
2260
imageGalleryPrev() {
23-
if(this.imageGalleryImageIndex == 1){
24-
this.imageGalleryImageIndex = this.$refs.gallery.childElementCount;
25-
} else {
26-
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) - 1;
27-
}
28-
61+
this.imageGalleryImageIndex = (this.imageGalleryImageIndex == 1) ? this.imageGallery.length : (parseInt(this.imageGalleryImageIndex) - 1);
2962
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
3063
3164
}
@@ -34,25 +67,12 @@
3467
@image-gallery-prev.window="imageGalleryPrev()"
3568
@keyup.right.window="imageGalleryNext();"
3669
@keyup.left.window="imageGalleryPrev();"
37-
x-init="
38-
imageGalleryPhotos = $refs.gallery.querySelectorAll('img');
39-
for(let i=0; i<imageGalleryPhotos.length; i++){
40-
imageGalleryPhotos[i].setAttribute('data-index', i+1);
41-
}
42-
"
4370
class="w-full h-full select-none">
4471
<div class="max-w-6xl mx-auto duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
4572
<ul x-ref="gallery" id="gallery" class="grid grid-cols-2 gap-5 lg:grid-cols-5">
46-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-01.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 01"></li>
47-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-02.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 02"></li>
48-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-03.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 03"></li>
49-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-04.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 04"></li>
50-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-05.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 05"></li>
51-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-06.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 06"></li>
52-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-07.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 07"></li>
53-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-08.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 08"></li>
54-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-09.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 09"></li>
55-
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-10.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 10"></li>
73+
<template x-for="(image, index) in imageGallery">
74+
<li><img x-on:click="imageGalleryOpen" :src="image.photo" :alt="image.alt" :data-index="index+1" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]"></li>
75+
</template>
5676
</ul>
5777
</div>
5878
<template x-teleport="body">

0 commit comments

Comments
 (0)