JavaScript-Projects/gallery/index.html at main · amit265/JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html>

<head>
  <meta name="description"
    content="A basic JavaScript Gallery application to showcase images in a clean and simple layout." />
  <meta name="keywords"
    content="gallery, JavaScript gallery app, image showcase, simple image gallery, basic JavaScript project" />
  <meta property="og:title" content="Gallery" />
  <meta property="og:description"
    content="A basic JavaScript Gallery application to showcase images in a clean and simple layout." />
  <meta property="og:image" content="https://coderespite.com/image/js-projects/gallery.png" />
  <meta property="og:url" content="https://coderespite.com/projects/js-projects/gallery" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Gallery" />
  <meta name="twitter:description"
    content="A basic JavaScript Gallery application to showcase images in a clean and simple layout." />
  <meta name="twitter:image" content="https://coderespite.com/image/js-projects/gallery.png" />

  <title>Gallery</title>
  <link rel="stylesheet" href="styles.css">
  <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">
    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
    <li>
      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img
          src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
    </li>
    <li>
      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img
          src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
    </li>
    <li>
      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img
          src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
    </li>
    <li>
      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img
          src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
    </li>
    <li>
      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img
          src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
    </li>
  </ul>

  <script>
    thumbs.onclick = function (event) {
      let thumbnail = event.target.closest('a');

      if (!thumbnail) return;
      showThumbnail(thumbnail.href, thumbnail.title);
      event.preventDefault();
    }

    function showThumbnail(href, title) {
      largeImg.src = href;
      largeImg.alt = title;
    }
  </script>

</body>

</html>