Menggunakan Image Lightbox Dengan CSS Dan Javascript

Usuluddin, S.Kom    Jumat, April 03, 2020    TUTORIAL   

Menggunakan Image Lightbox Dengan CSS Dan Javascript

GoSEO.id - Makin hari semakin jarang update!! Yaaa ini disebabkan oleh kondisi yang menimpa kita saat ini. Sehingga terjadinya keterbatasan waktu antara pekerjaan kantor dan waktu untuk memposting.

Berhubung saat ini saya sedang mempunyai kesempatan untuk membuat tutor sederhana, dan atas permintaan seorang teman, Maka pada kesempatan kali ini kita akan membahas tips "Menggunakan Image Lightbox Dengan CSS Dan Javascript".

Tanpa perlu basa basi dan memikirkan SEO dalam postingan lagi, hehehe...
Yuk simak tips berikut..

Menggunakan Image Lightbox Dengan CSS Dan Javascript

1. Login pada akun blogger.com milikmu.

2. Kemudian masuk ke menu TEMA ➔ lalu klik tombol Edit HTML.

3. Setelah itu letakkan kode dibawah ini pada Style blog kamu.

.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;}}

4. Lalu copy dan pastekan juga kode dibawah ini dan letakkan diatas 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');
  }
}

5. Terakhir klik tombol Simpan dan Selesai.

Bagaimana? sangat mudah bukan?

Beginilah tutor sederhana untuk tips "Menggunakan Image Lightbox Dengan CSS Dan Javascript". Semoga tutorial ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak dimengerti. Terima kasih sudah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subcribe pada kolom Newsletter untuk tetap mendapatkan update-an postingan terbaru kami.