ISETGallery.github.io/index.html at main · ISET/ISETGallery.github.io · 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
<div style='display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;justify-items: center; margin: 0 50px;'>
  <h1 style='grid-column: 1 / -1; text-align: center; font-family: Arial, sans-serif; font-size: 3rem;margin-bottom: 20px; margin: 20px 0;'>ISET Gallery</h1>
  <!-- Gallery Images -->
  <div class='image-container' style='position: relative;'>
    <img src='images/bathroom.jpg' alt='Image 1' style='width: 100%; height: auto; border-radius: 20px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
    <!-- More images will be added here -->
  </div>
  <div class='image-container' style='position: relative;'>
    <img src='images/conell-box.jpg' alt='Image 1' style='width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
  </div>
  <div class='image-container' style='position: relative;'>
    <img src='images/mouth.jpg' alt='Image 1' style='width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
  </div>
  <div class='image-container' style='position: relative;'>
    <img src='images/placeholder_01.jpg' alt='Image 1' style='width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
    <!-- More images will be added here -->
  </div>
  <div class='image-container' style='position: relative;'>
    <img src='images/placeholder_02.jpg' alt='Image 1' style='width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
  </div>
  <div class='image-container' style='position: relative;'>
    <img src='images/placeholder_03.jpg' alt='Image 1' style='width: 100%; height: auto; margin-bottom: 20px; border-radius: 10px; box-shadow: 0px 0px 20px #333; transition: 0.3s; filter: grayscale(100%);' onmouseover='this.style.filter="none"' onmouseout='this.style.filter="grayscale(100%)"'>
  </div>
  <script>
    window.onclick = function(event) {
        if (event.target == document.getElementById('popup')) {
          hidePopup();
        }
      };
    </script>
    <script>
  // Function to show the popup
  function showPopup(imageSrc, imageInfo) {
    var popup = document.getElementById('popup');
    popup.style.display = 'block';
    // Set the image source and information
    popup.innerHTML = '<img src="' + imageSrc + '" alt="Image" style="width:100%;"><p>' + imageInfo + '</p><a href="' + imageSrc + '" download>Download Image</a><br><button onclick="hidePopup()">Close</button>';
  }

  // Function to hide the popup
  function hidePopup() {
    var popup = document.getElementById('popup');
    popup.style.display = 'none';
  }

  // Add click event listeners to images
  document.querySelectorAll('.image-container img').forEach(img => {
    img.addEventListener('click', function() {
      showPopup(this.src, 'Additional image information here');
    });
  });
</script>
<div id='popup' onclick='event.stopPropagation()' style='display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);'>
    <p>Image information and download link will go here.</p>
    <button onclick='hidePopup()' style='position: absolute; top: 10px; right: 10px; border: none; background: none; font-size: 16px; cursor: pointer;'>&times;</button>
</div>
</div>