File tree Expand file tree Collapse file tree 11 files changed +103
-0
lines changed Expand file tree Collapse file tree 11 files changed +103
-0
lines changed Original file line number Diff line number Diff line change 1+ let images = document . querySelectorAll ( "img" ) ;
2+ let wrapper = document . getElementById ( "wrapper" ) ;
3+ let imgWrapper = document . getElementById ( "fullImg" ) ;
4+ let close = document . querySelector ( "span" ) ;
5+
6+ images . forEach ( ( img , index ) => {
7+ img . addEventListener ( "click" , ( ) => {
8+ openModal ( `images/img${ index } ) ;
9+ } ) ;
10+ } ) ;
11+
12+ close . addEventListener ( "click" , ( ) => ( wrapper . style . display = "none" ) ) ;
13+
14+ function openModal ( pic ) {
15+ wrapper . style . display = "flex" ;
16+ imgWrapper . src = pic ;
17+ }
Original file line number Diff line number Diff line change 1+ < html lang ="en ">
2+ < head >
3+ < meta charset ="UTF-8 " />
4+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > Image Gallery</ title >
7+ < link rel ="stylesheet " href ="style.css " />
8+ </ head >
9+ < body >
10+ <!-- code for JavaScript -->
11+ < div class ="imageWrapper " id ="wrapper ">
12+ < img src ="images/Img1.jpg " id ="fullImg " />
13+ < span > X</ span >
14+ </ div >
15+
16+ < div class ="img-gallery ">
17+ < img src ="images/Img1.jpg " />
18+ < img src ="images/Img2.jpg " />
19+ < img src ="images/Img3.jpg " />
20+ < img src ="images/Img4.jpg " />
21+ < img src ="images/Img5.jpg " />
22+ < img src ="images/Img6.jpg " />
23+ < img src ="images/Img7.jpg " />
24+ < img src ="images/Img8.jpg " />
25+ </ div >
26+
27+ < script src ="app.js "> </ script >
28+ </ body >
29+ </ html >
You can’t perform that action at this time.
0 commit comments