Glightbox Pure Javascript Lightbox Support Zoom & Drag N Drop
www.reload.id | Glightbox Pure Javascript Lightbox Support Zoom & Drag N Drop - Pada tutorial Website & Blogspot kali ini admin mau share cara memasang Glightbox sebuah pure javascript yang sangat ringan untuk diterapkan pada website / blog kita. Sebelumnya pernah dishare juga seputar SimpleLightbox untuk menggantikan Lightbox bawaan dari blogger.
Untuk postingan kali ini Tidak berbeda jauh dengan artikel sebelumnya kali ini kita akan menerapkan Glightbox pada Blogger. pada website reload.id ini, telah diterapkan 2 lightbox dengan conditional tag yang berbeda, dimana SimpleLightbox hanya untuk halaman Item Postingan. Dan untuk Glightbox ini diterapkan hanya pada halaman Demo Website. Karena Glightbox ini memiliki fitur Zoom, Drag N Drop atau istilah lainnya Touchable serta mendukung versi mobile dan video.
Berikut langkah-langkah untuk menerapkan Glightbox :
- Masuk ke Blogger
- Pilih Menu Theme klik tombol Customise, pilih Edit HTML
- Tambahkan script js dan css glightbox berikut bisa diletakan atau sebelum tag </body>
<link href='https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css' rel='stylesheet'/
<script src='https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js'></script>
<script>
const lightbox = GLightbox({
selector: '.separator a',
touchNavigation: true,
loop: true,
autoplayVideos: true
});
</script> - Terakhir simpan dan lihat pada halaman statis atau item post artikel kita.
Ket : .separator a adalah selector untuk image blogger karena biasanya hasil dari upload gambar pada dashboard blogger memiliki element div dengan class separator.
Sebenernya setiap library javascript / lightbox apapun itu namanya bisa di integrasikan dengan website / blog kita, dengan sedikit memahami dom selector javascript maka kita bisa menerapkan jenis lightbox yang kita suka.
Untuk dokumentasi selengkapnya dan opsi-opsi lainnya bisa dicek dihalaman github Glightbox.
Untuk demo previewnya bisa langsung cek di halaman Demo Website di web reload.id