Skip to content

Commit f5205aa

Browse files
last-endcodelast-endcode
committed
update
1 parent 2b1b92c commit f5205aa

File tree

3 files changed

+168
-5
lines changed

3 files changed

+168
-5
lines changed

‎OOP_Projects/gallery/starter/app.js‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,75 @@
1-
function getElement(selection) {
2-
const element = document.querySelector(selection);
1+
function getElement(selectElement) {
2+
const element = document.querySelector(selectElement);
3+
// if true back to element value
34
if (element) {
45
return element;
56
}
7+
// if falses notice
68
throw new Error(
7-
`Please check "${selection}" selector, no such element exists`
9+
`please check your element on html ${selectElement} cause not found`
810
);
911
}
12+
13+
function Gallery(element) {
14+
// for all picture tdk menggunakan ini
15+
//karena nodelist dan solusi ada spread operator
16+
// this.list = element.querySelectorAll('.img');
17+
this.list = [...element.querySelectorAll('.img')];
18+
// console.log(this.list);
19+
// ** Target
20+
this.container = element;
21+
this.modal = getElement('.modal'); //tampilan awal fixed
22+
this.mainImg = getElement('.main-img'); //content tuk gambar
23+
this.imgName = getElement('.image-name'); //tuk text dibawah content
24+
this.modalImages = getElement('.modal-images'); //gambar dibawah
25+
// ** close
26+
this.prevBtn = getElement('.prev-btn');
27+
this.nextBtn = getElement('.next-btn');
28+
this.closeBtn = getElement('.close-btn');
29+
30+
// Bind function
31+
// ref u can use this one
32+
let self = this; //dia merujuk pada Gallery
33+
// ** Click
34+
this.container.addEventListener(
35+
'click',
36+
function (e) {
37+
// ** IF target same with img
38+
// tampilkan e.target , dan list (img)
39+
if (e.target.classList.contains('img')) {
40+
this.openModal(e.target, this.list);
41+
}
42+
// self.openModal();
43+
}.bind(this)
44+
);
45+
}
46+
47+
// protype function for openModal()
48+
// param for selectedImage, and list (img)
49+
Gallery.prototype.openModal = function (selectedImage, list) {
50+
// *** invoke this.setMainImage
51+
this.setMainImage(selectedImage);
52+
// *** map modalImages
53+
// show display modal-image
54+
this.modalImages.innerHTML = list
55+
.map(function (image) {
56+
return `<img src="${
57+
image.src
58+
}" title="${image.title}" data-id="${image.dataset.id}" class="${selectedImage.dataset.id === image.dataset.id ? 'modal-img selected' : 'modal-img'}"/>`;
59+
})
60+
.join('');
61+
62+
// *** invoke this.modal
63+
this.modal.classList.add('open');
64+
};
65+
66+
// for main-image, and image-name
67+
Gallery.prototype.setMainImage = function (selectedImage) {
68+
// set picture & title
69+
this.mainImg.src = selectedImage.src;
70+
this.imgName.textContent = selectedImage.title;
71+
};
72+
73+
// create new instance object
74+
const nature = new Gallery(getElement('.nature'));
75+
const city = new Gallery(getElement('.city'));

‎OOP_Projects/gallery/starter/index.html‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,104 @@
1313
<link rel="stylesheet" href="styles.css" />
1414
</head>
1515
<body>
16-
<h2>gallery project</h2>
16+
<!-- nature -->
17+
<section class="section nature">
18+
<img
19+
src="./images/nature-1.jpeg"
20+
title="nature-1"
21+
class="img"
22+
data-set="1"
23+
alt="nature"
24+
/>
25+
<img
26+
src="./images/nature-2.jpeg"
27+
title="nature-2"
28+
class="img"
29+
data-set="2"
30+
alt="nature"
31+
/>
32+
<img
33+
src="./images/nature-3.jpeg"
34+
title="nature-3"
35+
class="img"
36+
data-set="3"
37+
alt="nature"
38+
/>
39+
</section>
40+
<!-- city -->
41+
<section class="section city">
42+
<img
43+
src="./images/city-1.jpeg"
44+
title="city-1"
45+
class="img"
46+
data-set="1"
47+
alt="city"
48+
/>
49+
<img
50+
src="./images/city-2.jpeg"
51+
title="city-2"
52+
class="img"
53+
data-set="2"
54+
alt="city"
55+
/>
56+
<img
57+
src="./images/city-3.jpeg"
58+
title="city-3"
59+
class="img"
60+
data-set="3"
61+
alt="city"
62+
/>
63+
<img
64+
src="./images/city-4.jpeg"
65+
title="city-4"
66+
class="img"
67+
data-set="4"
68+
alt="city"
69+
/>
70+
<img
71+
src="./images/city-5.jpeg"
72+
title="city-5"
73+
class="img"
74+
data-set="5"
75+
alt="city"
76+
/>
77+
</section>
78+
<!-- modal tampilan awal fixed-->
79+
<div class="modal">
80+
<button class="close-btn">
81+
<i class="fas fa-times"></i>
82+
</button>
83+
<!-- modal-content tuk lembar gambar-->
84+
<div class="modal-content">
85+
<!-- prev-btn -->
86+
<button class="prev-btn">
87+
<i class="fas fa-chevron-left"></i>
88+
</button>
89+
<button class="next-btn">
90+
<i class="fas fa-chevron-right"></i>
91+
</button>
92+
<!-- content for images -->
93+
<img src="./images/city-1.jpeg" class="main-img" alt="" />
94+
<h3 class="image-name">image name</h3>
95+
<!-- modal-images tuk gambar dibawah modal-content -->
96+
<div class="modal-images">
97+
<img
98+
src="./images/city-5.jpeg"
99+
title="city-5"
100+
class="modal-img"
101+
data-set="5"
102+
alt=""
103+
/>
104+
<img
105+
src="./images/city-4.jpeg"
106+
title="city-4"
107+
class="modal-img selected"
108+
data-set="4"
109+
alt=""
110+
/>
111+
</div>
112+
</div>
113+
</div>
17114
<script src="app.js"></script>
18115
</body>
19116
</html>

‎OOP_Projects/gallery/starter/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ Modal
209209
.prev-btn {
210210
position: absolute;
211211
top: 10rem;
212-
right: -2.5rem;
212+
right: -3rem;
213213
transform: translateY(-50%);
214214
background: transparent;
215215
font-size: 2rem;

0 commit comments

Comments
 (0)