image lightbox sederhana menggunakan CSS dan Javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat image lightbox sederhana menggunakan CSS dan Javascript.

pada umumnya image lightbox ketika sebuah gambar di postingan di klik, maka akan muncul sebuah pop up yang akan menampilkan gambar yang lebih besar dan jika di dalam postingan tersebut terdapat lebih dari satu gambar maka akan menampilkan gambar-gambar tersebut dengan tombol next atau scroll untuk melihat gambar lainnya.

namun di sini kita hanya membuat image lightbox yang sederhana saja tanpa ada tombol next atau scroll, karena jika ingin membuat image lightbox yang bisa menampilkan semua gambar dan ada tombol next dan scroll nya harus menggunakan jQuery serta js lightbox yang ukurannya lumayan dapat mempengaruhi loading blog.

jadi script yang akan saya bagikan hanya menggunakan CSS dan Javascript saja tanpa ada sentuhan jQuery tentunya tidak akan berdampak buruk pada loading blog, jadi cara kerjanya begini setiap gambar yang di bungkus dengan div maka akan otomatis di tambahkan toogle class pada div tersebut, ketika gambar diklik akan membuat gambar menjadi full screen.

ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini

Cara Membuat Image Lightbox Sederhana Menggunakan CSS Dan Javascript

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;max-width:800px;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:.8;transition:all .4s ease-in-out}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;max-width:100%}}

lanjut letakkan javascript di bawah ini di atas kode </body> jika tidak menemukannya kemungkinan telah di parse shingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
function wrap(t,e,r){for (var i = document.querySelectorAll(e),o = 0;o < i.length;o++){var a = t + i[o].outerHTML + r;i[o].outerHTML = a}}
wrap("<div class='zoomclick'>",".post-body img","</div>");var container = document.getElementsByClassName("zoomclick");for (var i = 0;i < container.length;i++){container[i].onclick = function(event){this.classList.toggle('active');var element = document.body;element.classList.toggle('flow')}}
//]]>
</script>

jika sudah silakan klik simpan dan lihat hasilnya.

penting
gambar dalam postingan tersebut tidak boleh memiliki link agar ketika gambar di klik tidak membuka gambar di browser

saat mengupload gambar langsung kurang lebih akan tampak seperti di bawah ini saat di alihkan ke mode html, silakan kalian hapus bagian yang saya tandai.

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/xxxx.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" src="https://1.bp.blogspot.com/xxxx.png" width="320" /></a></div>

sehingga keseluruhan akan tampak seperti di bawah ini.

<div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="768" data-original-width="1366" src="https://1.bp.blogspot.com/xxxx.png" width="320" /></div>

ok jadi sekian cara membuat image lightbox sederhana menggunakan CSS dan Javascript semoga bermanfaat.

Referensi:
www.kompiajaib.com/2020/04/image-lightbox-dengan-css-dan-javascript.html