Script Auto Image Lightbox atau Zoom Image adalah fitur yang akan membuat gambar-gambar pada website kamu menjadi lebih menarik dan interaktif. Dengan menggunakan script ini, ketika pengguna mengklik gambar, gambar tersebut akan secara otomatis diperbesar dengan efek zoom, sehingga mereka dapat melihat detail yang lebih jelas.
Script ini dapat bekerja di semua template blogger jika pemasanganya benar karena sudah pernah saya terapkan di berbagai template lainnya. Script ini diadaptasi dari template jagodesain hanya dengan CSS dan JS saja. Script ini bekerja dengan otomatis membuat semua gambar yang ada didalam post-body ketika di klik akan menjadi lightbox atau bisa disebut juga zoom image atau juga biasa disebut pop up image apalah itu.
Jadi telepas didalamnya mengandung tag <div> separator, dll, yang intinya ketika ada tag <img> maka gambar tersebut ketika di klik otomatis ngezoom. Untuk penerapanya pada web sudah bawaan template. Klik saja sebuag gambar postingan, maka akan otomatis pop up.
Oh iya, script ini juga tidak akan membuat berpindah halaman ketika gambar mengandung tag <a> yang merupakan link gambar itu sendiri. Jadi dia force pop up saja. Plus ketika upload gambar PNG biasanya area diluar gambar ketika di klik juga yang ke klik link dari tag <a>, script ini sudah fix masalah itu. Ga paham?
Misal saya mengupload gambar di blogger, scriptnya normalnya seperti ini;
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTPV_ZVBiiYP-K9dBsbadBKd3f0Yn8Hj3tUh6AsszO8NxhrdhieRC_nMt_X20fnxs1pE9Hf7mCn8Miw0x4AvLdH_A9qLES8crK7lrR8rGY3tJ2N8M9o2Oi9-MAgCCa8glX5dHi3LwraO2KJQEEwcJB9dX5tgTh_TuOBfz3go7OT2OJ1bcocX46OG3dg/s1600/supersemar.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="535" data-original-width="786" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTPV_ZVBiiYP-K9dBsbadBKd3f0Yn8Hj3tUh6AsszO8NxhrdhieRC_nMt_X20fnxs1pE9Hf7mCn8Miw0x4AvLdH_A9qLES8crK7lrR8rGY3tJ2N8M9o2Oi9-MAgCCa8glX5dHi3LwraO2KJQEEwcJB9dX5tgTh_TuOBfz3go7OT2OJ1bcocX46OG3dg/s1600/supersemar.jpg"/></a></div>
Ketika gambar dipencet harusnya redirect ke link gambarnya;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTPV_ZVBiiYP-K9dBsbadBKd3f0Yn8Hj3tUh6AsszO8NxhrdhieRC_nMt_X20fnxs1pE9Hf7mCn8Miw0x4AvLdH_A9qLES8crK7lrR8rGY3tJ2N8M9o2Oi9-MAgCCa8glX5dHi3LwraO2KJQEEwcJB9dX5tgTh_TuOBfz3go7OT2OJ1bcocX46OG3dg/s1600/supersemar.jpg
Nah disini gak akan seperti itu, walau ada link href dari <a> itu tidak memperngaruhi pop up. Dan beraku untuk semua gambar didalam postingan.
Script Auto Image Lightbox
Langkah 1 : Copy script style css ini dan pastekan diatas ]]></b:skin> pada halaman editor html template kamu.
.zmImg.s{position:fixed;top:0;left:0;bottom:0;right:0;width:100%;margin:0;background:rgba(0,0,0,.75); display:flex;align-items:center;justify-content:center;z-index:999; -webkit-backdrop-filter:saturate(180%) blur(15px); backdrop-filter:saturate(180%) blur(15px)} .zmImg.s img{display:block;max-width:92%;max-height:92%;width:auto;margin:auto;border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .zmImg.s img.full{left:auto;right:auto;border-radius:10px;width:auto} .zmImg::after{content:'\2715';line-height:16px;font-size:14px;color:#fffdfc;background:var(--button-bg); position:fixed;bottom:-20px;right:-20px; display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%; transition: all .1s ease;opacity:0;visibility:hidden} .zmImg.s::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer}
Langkah 2 : Copy script js ini dan pastekan diatas </body>.
<script>/*<![CDATA[*/
for (var imageslazy = document.querySelectorAll('.post-body .separator img, .post-body .tr-caption-container img, .post-body >img, .post-body >a'), 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="zmImg">', '.post-body .separator >a', '</div>'); wrap('<div class="zmImg">', '.post-body .tr-caption-container td >a', '</div>'); wrap('<div class="zmImg">', '.post-body .separator >img', '</div>'); wrap('<div class="zmImg">', '.post-body >a', '</div>'); wrap('<div class="zmImg">', '.post-body .tr-caption-container td >img', '</div>'); wrap('<div class="zmImg">', '.post-body >img', '</div>'); for (var containerimg = document.getElementsByClassName('zmImg'), i = 0; i < containerimg.length; i++) containerimg[i].onclick = function() {this.classList.toggle('s');}; const links=document.querySelectorAll(".post-body a");links.forEach(e=>{let t=e.querySelector("img");t&&(e.style.pointerEvents="none",e.style.cursor="default",e.style.textDecoration="none",e.style.color="inherit")});
/*]]>*/</script>
Langkah 3 : Sesuaikan class post body pada js yang sudah kamu pastekan sesuai class post body pada template blogger kamu.
Menentukan Class post body Pada Template
Cara nyarinya class post body gimana bang?
Kamu hanya tinggal masuk ke salah satu postingan blog kamu, lalu masuk ke halaman view-source:. Nah biasanya class post body ada diatas kata pertama di postingan kamu. Bisa jadi Ps, PostBody, PsB, pSbody, dll. Tinggal sesuaikan dan ubah pada script js yang sudah saya tkamui tadi yang mengandung kata post body.
Class Post Body double
Kalo ada 2 bang? di template gw ada 2 kaya gambar dibawah (post-body dan postBody)?
Ya tinggal kamu coba coba saja. Dan disini kebetulan yang berfungsi adalah class yang postBody. Sama satu lagi, hutuf kapital juga mempengaruhi, jadi pastikan tidak typo.
Sekian, HEXARTCH.