[UPDATE] Image Lightbox Dengan CSS dan Javascript

[PERBARUI] Gambar Lightbox dengan CSS dan Javascript . Beberapa waktu yang lalu saya menerbitkan artikel tentang lightbox gambar CSS dan Javascript untuk menggantikan lightbox Blogger.

Namun saya melihat masih banyak blogger yang tidak peduli untuk menghapus link yang dibuat saat mengupload gambar ke Blogger. Itu sebabnya lightbox tidak berfungsi karena lightbox tidak dapat memiliki tautan sebagai pesan.

Untuk melakukan ini, saya menyegarkan lightbox meskipun tautan di pos tidak dihapus.

Misalnya, jika Anda mengunggah gambar ke blogger tanpa menghapus tautan, kode berikut akan muncul:

Untuk membuat lightbox berfungsi, saya menonaktifkan tautan pada gambar di sini sehingga mengklik gambar tidak menuju ke tautan.

Jadi disini hanya kode javascript yang diubah dan kode CSS tidak diubah.

Jika Anda ingin mencobanya, gunakan kode berikut.

Ingat CSS di bawah ini untuk menata 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 paste javascript berikut di atas kode

 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("
 "," .post-body .separator a ","
 ");

 for (var containerimg = document.getElementsByClassName("zoomclick"), i = 0; i < containerimg.length; i++) containerimg [i].onclick = function () {

 this.classList.toggle("aktif");

 var o = badan dokumen;

 o.classList.toggle("aliran")

 };

Gunakan kode di bawah ini untuk menyimpan javascript atau menggabungkannya dengan javascript lain jika sudah ada.

Demonstrasi

Silakan coba klik pada gambar. Ini mungkin berguna.