[UPDATE] Image Lightbox Dengan CSS dan Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/09/2021

[UPDATE] Image Lightbox Dengan CSS dan Javascript - Beberapa waktu yang lalu saya membuat postingan tentang Image Lightbox Dengan CSS dan Javascript untuk menggantikan lightbox Blogger.

Namun saya lihat masih banyak blogger yang tidak mau repot untuk menghapus link yang dihasilkan ketika mengupload gambar di Blogger. Alhasil lightbox-nya jadi tidak berfungsi karena pada lightbox tersebut tidak boleh ada link pada gambar postingan.

Untuk itu, kini saya mengupdate lightbox tersebut agar tetap berfungsi walaupun link pada gambar postingan tidak dihapus.

Sebagai contoh, berikut ini kode yang dihasilkan ketika mengupload gambar di blogger tanpa menghapus link-nya

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMp9ZnbcXQrgKpM9XG5SodQdvJ-RcJYaES84Lxm8LZhqn27Jl3Nz1_kA8ubTVLcLHBYkeTd7mXwUkjxPWydpoUAwvq9cMA_XT9U9TDZajiPep7PpjObu7gkJTeKmqU52ZkNia-u4PFyf4/s750/editan-pakar-photoshop-3.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Minta ditambahkan air terjun dan yang hijau-hijau. Foto: dok James Fridman" border="0" data-original-height="750" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMp9ZnbcXQrgKpM9XG5SodQdvJ-RcJYaES84Lxm8LZhqn27Jl3Nz1_kA8ubTVLcLHBYkeTd7mXwUkjxPWydpoUAwvq9cMA_XT9U9TDZajiPep7PpjObu7gkJTeKmqU52ZkNia-u4PFyf4/s16000/editan-pakar-photoshop-3.jpeg" title="Minta ditambahkan air terjun dan yang hijau-hijau. Foto: dok James Fridman" /></a></div>

Agar lightbox-nya bekerja, di sini saya mematikan link pada gambarnya, sehingga ketika gambar diklik tidak menuju link tersebut.

Jadi di sini yang berubah adalah kode javascript-nya saja, sementara untuk kode css-nya tidak berubah.

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

Simpan kode CSS berikut di style blog Anda.

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

Kemudian simpan javascript berikut ini di atas kode </body>

for (var imageslazy = document.querySelectorAll(".post-body .separator 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>");

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

Silahkan coba klik pada gambarnya. Semoga bermanfaat.