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

[Update] Lightbox Gambar dengan CSS dan JavaScript untuk Gambar Bernama - Bagi blogger yang sebelumnya menonaktifkan Blogger JS karena memposting gambar dengan tautan, setelah memperbarui lightbox gambar , teman blogger lain menambahkan lightbox ini dengan keterangan.

Seperti yang kita ketahui, gambar dengan teks menggunakan kode HTML yang berbeda dengan gambar tanpa teks, misalnya: b. menggunakan tag table dari kelas tr-caption-container .

Hal ini justru menyebabkan javascript separator gambar sebelumnya tidak berjalan karena referensi pemisah tidak ditemukan.

Saat ini saya memperbarui gambar ringan itu dengan css dan javascript untuk memposting gambar dengan tautan dan memposting gambar dengan tautan dan keterangan .

Jika Anda ingin mencobanya, gunakan kode di bawah ini.

Tempatkan kode CSS berikut dalam gaya blog Anda. Jika Anda pernah menggunakan gambar ringan sebelumnya, itu masih sama sehingga Anda tidak perlu menambahkan CSS.

 .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 letakkan javascript berikut di atas kode . Jika sebelumnya Anda pernah menggunakan gambar Lightbox, silahkan ganti javascriptnya 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("
 ",". Posting tubuh. tandai, "
 ");

 menutup("
 ",". post-person .tr-description-holder a", "
 ");

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

 this.classList.toggle("aktif");

 var o = document.body;

 o.classList.toggle("aliran").

 };

Gunakan kode berikut untuk menyimpan JavaScript atau menggabungkan JavaScript lain jika tersedia.

Iblis

Ini bisa berguna.