<HTML>
<head>
<title>Gallery</title>
<link rel="stylesheet" href="gallery.css"></link>
<meta charset="utf-8">
</head>
<body>
<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<ul id="thumbs">
<ul>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-lg.jpg"></a>
</ul>
</ul>
/*In the example, inner list was consist of li
but it didnt align the thumbnails horizontally, looked like a stairs by hierarchy
I changed it to be ul, now looks horizontal. ^ㅅ^ I like this task much*/
<script>
thumbs.onclick = function(event) {
let thumbnail = event.target.closest('a');
//get the event which in inside the a or exactly is a
if(!thumbnail) return; //if its not, 돌아가라!
showThumbmail(thumbnail.href, thumbnail.title);
event.preventDefault();
//default likes to the origin page of the image source, prevent it
function showThumbmail(href, title){
largeImg.src = href;
largeImg.alt = title;
/*the tag can be selected by variable name in JS
and the attributes also can be changed ^ㅅ^
easy science!
*/
}
}
</script>
</body>
</HTML>
<head>
<title>Gallery</title>
<link rel="stylesheet" href="gallery.css"></link>
<meta charset="utf-8">
</head>
<body>
<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<ul id="thumbs">
<ul>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-lg.jpg"></a>
</ul>
<ul>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-lg.jpg"></a>
</ul>
</ul>
/*In the example, inner list was consist of li
but it didnt align the thumbnails horizontally, looked like a stairs by hierarchy
I changed it to be ul, now looks horizontal. ^ㅅ^ I like this task much*/
<script>
thumbs.onclick = function(event) {
let thumbnail = event.target.closest('a');
//get the event which in inside the a or exactly is a
if(!thumbnail) return; //if its not, 돌아가라!
showThumbmail(thumbnail.href, thumbnail.title);
event.preventDefault();
//default likes to the origin page of the image source, prevent it
function showThumbmail(href, title){
largeImg.src = href;
largeImg.alt = title;
/*the tag can be selected by variable name in JS
and the attributes also can be changed ^ㅅ^
easy science!
*/
}
}
</script>
</body>
</HTML>
댓글
댓글 쓰기