zoom image

by kompiajaib

HTML

<div class="post-body">

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lwC10QyIb7w/YTCoqjVbqLI/AAAAAAABUR0/KIwO0Um1cqIB5OrGH6176QI0eYggHhbpQCLcBGAsYHQ/s1600/Natures_%2B0001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="contoh" border="0" data-original-height="1200" data-original-width="1600" src="https://1.bp.blogspot.com/-lwC10QyIb7w/YTCoqjVbqLI/AAAAAAABUR0/KIwO0Um1cqIB5OrGH6176QI0eYggHhbpQCLcBGAsYHQ/s16000/Natures_%2B0001.jpg" /></a></div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-aqlKBg34aMk/YTCo2xtd6nI/AAAAAAABUR4/R17YOn-Pv0gRK5R8c0s5I67iE45945ySwCLcBGAsYHQ/s1600/Natures_%2B0002.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="contoh" border="0" data-original-height="1200" data-original-width="1600" src="https://1.bp.blogspot.com/-aqlKBg34aMk/YTCo2xtd6nI/AAAAAAABUR4/R17YOn-Pv0gRK5R8c0s5I67iE45945ySwCLcBGAsYHQ/s16000/Natures_%2B0002.jpg" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Ini contoh gambar blogger dengan link dan caption.</td></tr></tbody></table>

</div>

CSS

.post-body{width:600px;max-width:100%}
img{width:auto;max-width:100%;height:auto;}
.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.flow{overflow:hidden;position:relative;}
.zoomclick.active:after{content:"";cursor:pointer;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23cccccc' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:top right;-webkit-background-size:40px 40px;background-size:40px 40px;position:absolute;top:10px;right:10px;z-index:2;opacity:0;transition:all .4s ease-in-out}
.zoomclick.active:hover:after{opacity:.8}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;}}
.tr-caption{font-size:12px;font-style:italic;color:#9c9c9c;}

JavaScript

for (var imageslazy = document.querySelectorAll(".post-body .separator img,.post-body .tr-caption-container img"), i = 0; i < imageslazy.length; i++) imageslazy[i].setAttribute("onclick", "return false");

function wrap(o, t, e) {
  for (var i = document.querySelectorAll(t), c = 0; c < i.length; c++) {
    var a = o + i[c].outerHTML + e;
    i[c].outerHTML = a
  }
}
wrap("<div class='zoomclick'>", ".post-body .separator a", "</div>");
wrap("<div class='zoomclick'>", ".post-body .tr-caption-container a", "</div>");
for (var containerimg = document.getElementsByClassName("zoomclick"), i = 0; i < containerimg.length; i++) containerimg[i].onclick = function() {
  this.classList.toggle("active");
  var o = document.body;
  o.classList.toggle("flow")
};