JSFiddle - React, Tailwind, and code Playground

by Black Diamond

HTML

h<div class="gallery">
<h4>Φωτογραφικό υλικό από εργασίες μετατροπής τζακιού</h4>
<figure>
<a href="https://1.bp.blogspot.com/-BrK1VpD-9Sk/T94-DFMvLaI/AAAAAAAAAFM/0OQz0GiWnmE/s1600/metatropi-tzakiou-energeiako-1.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 1: άνοιγμα θυρίδας θερμοθαλάμου"><img alt="μετατροπή τζακιού  σε ενεργειακό στάδιο 1: άνοιγμα θυρίδας θερμοθαλάμου" src="https://1.bp.blogspot.com/-BrK1VpD-9Sk/T94-DFMvLaI/AAAAAAAAAFM/0OQz0GiWnmE/s90/metatropi-tzakiou-energeiako-1.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 1: άνοιγμα θυρίδας θερμοθαλάμου" width="90" height="75"></a>
<figcaption>Ανοιγμα Θυρίδας Θερμοθαλάμου</figcaption>
</figure>
<figure>
<a href="https://1.bp.blogspot.com/-uUS5kJFCMDo/T94-F_fAXvI/AAAAAAAAAFU/JY6a5bOhiv8/s1600/metatropi-tzakiou-energeiako-2.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 2: κατασκευή θερμοθαλάμου-δημιουργία αεραγωγών"><img alt="μετατροπή τζακιού  σε ενεργειακό στάδιο 2: κατασκευή θερμοθαλάμου-δημιουργία αεραγωγών" src="https://1.bp.blogspot.com/-uUS5kJFCMDo/T94-F_fAXvI/AAAAAAAAAFU/JY6a5bOhiv8/s90/metatropi-tzakiou-energeiako-2.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 2: κατασκευή θερμοθαλάμου-δημιουργία αεραγωγών" width="90" height="75"></a>
<figcaption>Κατασκευή Θερμοθαλάμου-Δημιουργία Αεραγωγών </figcaption>
</figure>
<figure>
<a href="https://1.bp.blogspot.com/-Uo8hKh2v3IU/T94-Ic85I1I/AAAAAAAAAFc/_-0RvY9XAFo/s1600/metatropi-tzakiou-energeiako-3.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 3: μόνωση θερμοθαλάμου - σύνδεση ενεργειακού καμινάδα"><img alt="μετατροπή τζακιού  σε ενεργειακό στάδιο 3:μόνωση θερμοθαλάμου - σύνδεση ενεργειακού καμινάδα" src="https://1.bp.blogspot.com/-Uo8hKh2v3IU/T94-Ic85I1I/AAAAAAAAAFc/_-0RvY9XAFo/s1600/metatropi-tzakiou-energeiako-3.jpg" title="μετατροπή τζακιού  σε ενεργειακό στάδιο 3:μόνωση θερμοθαλάμου - σύνδεση ενεργειακού καμινάδα" width="90" height="75"></a>
<figcaption>Μόνωση Θερμοθαλάμου - Σύνδεση Ενεργειακού με...

CSS

html,body{height:100%;width:100%;margin:0;padding:0;overflow:auto}
#modal{width:100%;height:100%;position:absolute;top:0;left:0;background-color:none;z-index:5;text-align:center}
#black{width:100%;height:100%;background-color:#222;z-index:-2;position:fixed;top:0;left:0;display:inline-block;opacity:1}
#imgbox{z-index:200;display:inline-block;text-align:center;min-width:100px;background-color:none;margin-top:50px}
#imgbox img{background-color:#fff}
#img{width:auto;max-width:100%;display:block}
#bardiv{width:100%;height:40px;position:fixed;top:0;left:0;background-color:none;margin:0;padding:0;text-align:center;z-index:2000;overflow:hidden;display:inline-block}
#bar{width:100%;height:40px;display:block;background:#111;margin:0 auto;overflow:hidden;padding:0}
#otitlos{display:inline-block;color:#ddd;padding:0 50px;font:75%/120% tahoma}
#prev,#next{height:100%;width:70px;position:absolute;background-color:transparent;border:none;cursor:pointer;overflow:hidden;outline:none;color:#FFF;top:0;font-size:40px;font:20px Tahoma}
#prev{left:0}
#next{right:0}
#close,#imgnum{position:fixed;z-index:999999;width:45px;height:40px;display:block;float:right;background:#111;border:0;color:#FFf;top:0}
#close{right:0;font-size:30px}
#imgnum{left:0}

JavaScript

var arr=[],kk=1;function pop(){aa=document.getElementsByTagName("a");for(i=0;i<aa.length;i++)if(bb=aa[i],ccc=aa[i].href,dd=ccc.slice(-4),".jpg"==dd||"jpg/"==dd||".JPG"==dd||"JPG/"==dd||".png"==dd||"png/"==dd||".PNG"==dd||"PNG/"==dd||".gif"==dd||"gif/"==dd||".GIF"==dd||"GIF/"==dd){vvv=bb;var a=parseFloat(i+1);arr.push({aaaa:bb.href,bbbb:bb.title,cccc:a});bb.setAttribute("data-modal-num",a);vvv.onclick=function(){kane(this);return!1}}}
function closediv(a){a.parentNode.parentNode.removeChild(a.parentNode)}
function kane(a){mmm=a.href;ooo=otitlos=a.title;mnum=a.getAttribute("data-modal-num");dimiW=a.width;dimiH=a.height;pedio=document.getElementsByTagName("body")[0];aa=document.createElement("div");aa.id="modal";aa.innerHTML='<div id="black"></div><button id="imgnum">'+parseFloat(mnum)+"/"+arr.length+'</button><button onclick="next()" id="next">&gt;</button><button onclick="prev()" id="prev">&lt;</button><button id="close"  onclick="closediv(this)">x</button><div id="imgbox"><img id="img" src="'+mmm+
'" ></div><div id="bardiv"><div id="bar"><span id="otitlos">'+otitlos+"</span><span></span></div></div>";pedio.appendChild(aa);kk=parseFloat(mnum-1)}function next(){kk==arr.length-1?kk=0:kk++;document.getElementById("img").src=arr[kk].aaaa;document.getElementById("otitlos").innerHTML=arr[kk].bbbb;document.getElementById("imgnum").innerHTML=arr[kk].cccc+"/"+arr.length}
function prev(){0==kk?kk=arr.length-1:kk--;document.getElementById("img").src=arr[kk].aaaa;document.getElementById("otitlos").innerHTML=arr[kk].bbbb;document.getElementById("imgnum").innerHTML=arr[kk].cccc+"/"+arr.length}window.addEventListener("load",function(){pop()});