Home / Blogger / CSS3 / HTML5 / Javascript / Trik / Tutorial / Uncategorized / Widget / Image Lightbox Dengan CSS dan Javascript

Image Lightbox Dengan CSS dan Javascript

4/01/2020 , , , , , , ,

Image Lightbox Dengan CSS dan Javascript

Image Lightbox Dengan CSS dan Javascript – Atas permintaan seorang teman, saya mencoba membuat image lightbox sesederhana mungkin dengan CSS dan javascript agar tidak terlalu membebani loading blog.

Sebenarnya saya memiliki beberapa postingan lama tentang image lightbox ini yang bisa disimak di link-link berikut:

  1. Membuat Image Lightbox Dengan Colorbox.js Di Blogger
  2. Membuat Lightbox Image Blogger Dengan Efek Zoom

Namun keduanya menggunakan jquery library serta js lightbox yang ukurannya lumayan dapat mempengaruhi loading blog.

Selain menggunakan jquery library serta js lightbox, kita juga harus menyesuaikan kode HTML untuk menampilkan image agar lightbox-nya bekerja.

Oleh karena itu, saya buatkan image lightbox dengan CSS dan javascript yang sederhana dan hanya beberapa baris serta tidak perlu merubah kode HTML image yang sudah ada.

Namun syaratnya, image dalam postingan tersebut tidak memiliki link.

Untuk demonya bisa dicoba di link berikut, silahkan coba klik pada gambarnya.

DEMO

Prinsipnya, saya membungkus setiap gambar ketika halaman dimuat dengan sebuah div, kemudian membuat toggle class pada div tersebut ketika gambar diklik untuk membuat gambar full screen.

Yang ingin mencobanya, silahkan gunakan kode-kode berikut:

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>

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++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
    this.classList.toggle('active');
    var element = document.body;
    element.classList.toggle('flow');
  }
}

Untuk WordPress, silahkan sesuaikan kode yang ditandai dengan class pembungkus postingannya.

Gunakan kode berikut untuk menyimpan javascript, atau gabungkan dengan javascript lain jika sudah ada.

<script>
//<![CDATA[
JAVASCRIPT DI SINI
//]]>
</script>

Dan ini blog yang sudah menggunakannya yaitu blog teman saya yang meminta dibuatkan image lightbox ini. Silahkan coba klik pada gambar postingannya untuk mencoba lightbox-nya.

DEMO ON BLOG

Semoga bermanfaat.


Disqus comments