[UPDATE] Image Lightbox Dengan CSS dan Javascript untuk Gambar Dengan Caption

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/02/2021

[UPDATE] Image Lightbox Dengan CSS dan Javascript untuk Gambar Dengan Caption - Setelah sebelumnya saya mengupdate Image Lightbox bagi blogger yang menonaktifkan JS Blogger agar bisa berfungsi untuk gambar postingan dengan link, kini ada lagi sahabat blogger yang request agar lightbox image ini juga berfungsi untuk gambar dengan caption.

Seperti kita ketahui bahwa gambar dengan caption menggunakan kode HTML berbeda dengan gambar tanpa caption yaitu menggunakan tag table dengan class tr-caption-container.

Sehingga tentu saja hal tersebut membuat javascript Image Lightbox sebelumnya tidak bekerja karena class separator yang jadi patokan tidak ditemukan.

Untuk itu, kini saya update agar image lightbox dengan CSS dan Javascript ini bisa bekerja untuk gambar postingan dengan link dan gambar postingan dengan link dan caption.

Jika ingin mencobanya, silahkan gunakan kode-kode berikut ini.

Simpan kode CSS berikut di style blog Anda. Jika Anda sudah menggunakan image lightbox sebelumnya, maka tidak perlu pasang CSS lagi karena masih sama.

.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;}

Kemudian simpan javascript berikut ini di atas kode </body>. Jika Anda sudah menggunakan image lightbox sebelumnya, maka silahkan ganti javascript-nya dengan yang berikut ini.

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")

};

Gunakan kode berikut untuk menyimpan javascript, atau gabungkan dengan javascript lain jika sudah ada.

<script>

//<![CDATA[

JAVASCRIPT DI SINI

//]]>

</script>

DEMO

Semoga bermanfaat.