website-old/image_work_2.html at main · Ross0907/website-old · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Work 2</title>
  <style>html,body{height:100%;margin:0;background:#000}img{width:100%;height:100%;object-fit:contain;display:block}</style>
</head>
<body>
  <div id="overlay" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100;background:transparent;"></div>
  <a id="close-btn" href="gallery.html" style="position:fixed;top:16px;left:16px;z-index:1001;font-size:2.5em;color:#fff;text-decoration:none;background:rgba(0,0,0,0.5);padding:0 12px;border-radius:6px;line-height:1;">&times;</a>
  <a id="open-raw" href="#" target="_blank" rel="noopener" style="position:fixed;top:16px;right:16px;z-index:1001;color:#fff;background:rgba(0,0,0,0.5);padding:8px 14px;border-radius:6px;text-decoration:none;font-size:1em;">Open image</a>
  <img data-base="images/work_2_large" alt="Work 2" style="z-index:1002;position:relative;">
  <script>
  (function(){
    var exts=['.jpg','.jpeg','.png','.webp','.gif','.svg'];
    var base='images/work_2_large';
    var img=document.querySelector('img[data-base]');
    var rawLink=document.getElementById('open-raw');
    var i=0;
    function next(){
      if(i>=exts.length) return;
      var url=base+exts[i++];
      var t=new Image();
      t.onload=function(){ img.src=url; if(rawLink) rawLink.href = url; };
      t.onerror=next;
      t.src=url;
    }
    next();

    document.getElementById('overlay').addEventListener('click', function(e){
      window.location.href = 'gallery.html';
    });
    window.addEventListener('keydown', function(e){
      if(e.key === 'Escape') window.location.href = 'gallery.html';
    });
    document.addEventListener('keydown', function(e){
      if(e.key === 'Escape') window.location.href = 'gallery.html';
    });
    img.addEventListener('click', function(e){ e.stopPropagation(); });
    document.getElementById('close-btn').addEventListener('click', function(e){ e.stopPropagation(); });
    rawLink.addEventListener('click', function(e){ e.stopPropagation(); });
  })();
  </script>
</body>
</html>