I created a gallery using the following codepen and now I’m trying to add the function click to expand an image, using this JS method. Sadly I cannot get it to work.
Any advice would be very helpful, either regarding this expand option or an alternative. Mind you I’m completely new to JS.
Thanks in advance!
JavaScript
x
15
15
1
var modal = document.getElementById('myModal');2
3
var img = document.getElementById('myImg');4
var modalImg = document.getElementById("image");5
img.onclick = function(){6
modal.style.display = "block";7
modalImg.src = this.src;8
captionText.innerHTML = this.alt;9
}10
11
var span = document.getElementsByClassName("close")[0];12
13
span.onclick = function() { 14
modal.style.display = "none";15
}JavaScript
1
152
152
1
/*main div*/2
3
.ponudba {4
background-color: rgb(0, 0, 0);5
z-index: 3;6
}7
8
.image-grid {9
padding: 12px;10
}11
12
.image-row {13
display: flex; 14
}15
16
.image-row .image {17
margin: 12px;18
height: 220px; 19
}20
21
.image { 22
background-repeat: no-repeat;23
background-size: cover;24
background-position: center center;25
border-radius: 3px;26
transition-duration: 0.5s;27
filter: contrast(75%);28
transition: all 0.3s ease-in;29
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), 30
0 3px 4px rgba(0, 0, 0, 0.15),31
0 3px 4px rgba(0, 0, 0, 0.7);32
margin: 0 0 0 15%;33
display: block;34
height: 100vh;35
max-width: 100%;36
animation-name: zoom;37
animation-duration: 0.6s;38
z-index: 3;39
}40
41
.image:hover {42
filter: contrast(100%);43
transition: all 0.3s ease-out;44
cursor: pointer;45
}46
47
.image-01 {48
background-image: url(images/jpg); 49
flex: 2;50
background-position: 50% 60%; 51
}52
53
.image-02 {54
background-image: url(images/jpg); 55
flex: 1.2; 56
}57
58
.image-03 {59
background-image: url(images/jpg); 60
flex: 1.5;61
background-position: 50% 70%; 62
}63
64
.image-04 {65
background-image: url(images/jpg); 66
flex: 3;67
background-position: 50% 60%;68
}69
70
.image-05 {71
background-image: url(images/jpg); 72
flex: 3;73
}74
75
.image-06 {76
background-image: url(images/jpg); 77
flex: 2; 78
}79
80
.image-07 {81
background-image: url(images/jpg); 82
flex: 1.5;83
}84
85
.image-08 {86
background-image: url(images/jpg); 87
flex: 2.5;88
background-position: 50% 70%;89
}90
91
.image-09 {92
background-image: url(images/jpg); 93
flex: 1;94
}95
.image-10 {96
background-image: url(images/jpg); 97
flex: 3;98
background-position: 50% 80%;99
}100
#myImg {101
border-radius: 3px;102
cursor: pointer;103
transition: 0.3s;104
}105
106
.modal {107
display: none;108
position: fixed;109
z-index: 1;110
left: 0;111
top: 0;112
width: 100%;113
height: 100%;114
overflow: auto;115
background-color: rgb(0,0,0);116
background-color: rgba(0,0,0,0.9);117
}118
119
@keyframes zoom {120
from {transform: scale(0.1)} 121
to {transform: scale(1)}122
}123
124
.close {125
position: absolute;126
top: 15px;127
right: 35px;128
color: #f1f1f1;129
font-size: 40px;130
font-weight: bold;131
transition: 0.3s;132
}133
134
.close:hover,135
.close:focus {136
color: #bbb;137
text-decoration: none;138
cursor: pointer;139
}140
141
@media only screen and (max-width: 700px){142
.modal-content {143
width: 100%;144
}145
.image-row {146
flex-direction: column;147
}148
149
.image-row .image {150
flex-basis: auto;151
}152
}JavaScript
1
25
25
1
<div class="ponudba" id="ponudba">2
<div class="image-grid">3
<div class="image-row">4
<div class="image image-01" id="image-01"></div> 5
<div class="image image-02" id="image-02"></div> 6
<div class="image image-03" id="image-03"></div> 7
<div class="image image-04" id="image-04"></div>8
9
</div> 10
<div class="image-row">11
<div class="image image-06" id="image-06"></div> 12
<div class="image image-05" id="image-05"></div>13
<div class="image image-07" id="image-07"></div>14
</div>15
<div class="image-row">16
<div class="image image-08" id="image-08"></div> 17
<div class="image image-09" id="image-09"></div>18
<div class="image image-10" id="image-10"></div> 19
</div>20
</div> 21
<div id="myModal" class="modal">22
<span class="close">×</span>23
<img class="modal-content" id="image">24
</div>25
</div> Advertisement
Answer
So after asking a collegue for help, this is what I got – an image gallery with clickable images.
Here’s the pen: https://codepen.io/fullstackgenerator/pen/YzaqYdb
JavaScript
1
21
21
1
var modal = document.getElementById('Modal');2
3
var imgaes = document.getElementsByClassName('image');4
var modalImg = document.getElementById("image-modal");5
imgaes = [].slice.call(imgaes);6
7
console.log(imgaes);8
9
imgaes.forEach(function(item){10
item.onclick = function(){11
modal.style.display = "block";12
13
modalImg.src = this.getAttribute('src');14
}15
})16
17
var span = document.getElementsByClassName("close")[0];18
19
modalImg.onclick = function() { 20
modal.style.display = "none";21
}JavaScript
1
138
138
1
body {2
margin: 0;3
background-color: rgb(0, 0, 0);4
}5
6
.ponudba {7
position: relative;8
background-color: rgb(0, 0, 0);9
height: 100vh;10
max-width: 100%;11
background-repeat: no-repeat;12
background-size: cover;13
background-position: 50% 50%;14
z-index: 6;15
}16
17
.image-grid {18
padding: 12px;19
}20
21
.image-row {22
display: flex; 23
}24
25
.image-row .image {26
margin: 12px;27
height: 220px; 28
}29
30
.image { 31
background-repeat: no-repeat;32
background-size: cover;33
background-position: center center;34
border-radius: 3px;35
height: 95%;36
max-width: 100%;37
}38
39
.image:hover {40
transition: all 0.3s ease-out;41
cursor: pointer;42
}43
44
.image-01 {45
background-image: url(https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg); 46
flex: 2;47
background-position: 50% 60%; 48
}49
50
.image-02 {51
background-image: url(https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg); 52
flex: 1.2; 53
}54
55
.image-03 {56
background-image: url(https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2); 57
flex: 1.5;58
background-position: 50% 70%; 59
}60
61
.image-04 {62
background-image: url(https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg); 63
flex: 3;64
background-position: 50% 60%;65
}66
67
.image-05 {68
background-image: url(https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93); 69
flex: 3;70
}71
72
.image-06 {73
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg); 74
flex: 2; 75
}76
77
.image-07 {78
background-image: url(https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d); 79
flex: 1.5;80
}81
82
.image-08 {83
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png); 84
flex: 2.5;85
}86
87
.image-09 {88
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg); 89
flex: 1;90
}91
.image-10 {92
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg); 93
flex: 3;94
}95
96
#myImg {97
border-radius: 3px;98
cursor: pointer;99
transition: 0.3s;100
}101
102
.modal {103
display: none;104
position: fixed;105
z-index: 10;106
left: 0;107
top: 0;108
width: 100%;109
height: 100vh;110
overflow: auto;111
background-color: rgb(0,0,0);112
background-color: rgba(0,0,0,0.9);113
}114
115
.modal-content {116
margin: auto;117
display: block;118
animation-name: zoom;119
animation-duration: 0.6s;120
}121
122
@keyframes zoom {123
from {transform: scale(0.1)} 124
to {transform: scale(1)}125
}126
127
@media only screen and (max-width: 700px){128
.modal-content {129
width: 100%;130
}131
.image-row {132
flex-direction: column;133
}134
135
.image-row .image {136
flex-basis: auto;137
}138
}JavaScript
1
26
26
1
<!--a BIG thank you to @awecodeman!-->2
3
<div class="ponudba" id="ponudba">4
<div class="image-grid">5
<div class="image-row">6
<div class="image image-01" id="image-01" src="https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg"></div> 7
<div class="image image-02" id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div> 8
<div class="image image-03" id="image-03" src="https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2"></div> 9
<div class="image image-04" id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>10
</div> 11
12
<div class="image-row">13
<div class="image image-05" id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div> 14
<div class="image image-06" id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg"></div>15
<div class="image image-07" id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>16
</div>17
18
<div class="image-row"">19
<div class="image image-08" id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png"></div> 20
<div class="image image-09" id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>21
<div class="image image-10" id="image-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg"></div> 22
<div id="Modal" class="modal">23
<span class="close">×</span>24
<img class="modal-content image" id="image-modal"></div>25
</div> 26
</div>