Selamat datang di website tips dan trik Dumet School, berjumpa kembali dengan saya yang akan selalu memberikan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery sekaligus mengenalkan tentang plugin lightgallery. Memang sangat banyak sekali plugin slide show mungkin teman – teman pernah mendengar nivo slide, wow slider dll. Bukan hanya itu saja tetapi masih ada ratusan plugin slide show salah satu nya plugin lightgallery ini, selain menarik tampilannya pun memberikan user pilihan di dalam tampilan. Apa itu pilihannya, pada gambar di bawah ini teman – teman bisa lihat kotak – kotak yang saya beri warna yang berbeda.
Nah bisa kalian lihat pada gambar di atas ini sangat banyak sekali fungsi nya
- kotak merah : menunjukan urutan slide dan total slide
- kotak orange : memberikan plihan share to social media
- kotak kuning : zoom in dan zoom out dengan 2 ukuran
- kotak hijau : zoom in dan zoom out dengan bebas ukuran hinga ukuran maksimal
- kotak biru : full screen
- kotak ungu : play otomatis slide show
- kotak kuning orange : download image
- kotak putih : close
Banyak sekali bukan fungsi nya, oke langsung saja kita praktekkan Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery. Teman – teman download plugin nya yang saya sediakan di link ini, kemudian siapkan gambarnya dengan ukuran yang sama. Kemudian ketikkan script html nya seperti gambar di bawah ini untuk menempilkan image nya
Kemudian hubungkan css nya
<link href="css/lightgallery.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css">
Kemudian load plugin nya yang sudah teman – teman download
<script src="js/picturefill.min.js"></script> <script src="js/lightgallery.js"></script> <script src="js/lg-pager.js"></script> <script src="js/lg-autoplay.js"></script> <script src="js/lg-fullscreen.js"></script> <script src="js/lg-zoom.js"></script> <script src="js/lg-hash.js"></script> <script src="js/lg-share.js"></script>
Kemudian baru kita panggil id nya
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
Jika sudah save dengan nama index.html dan jalankan pada browsernya, maka slide show dengan plugin lightgallery berhasil di buat. Dengan ini akan banyak pilihan kalian untuk pop up slide slow pada website nya. Baik, sekian pada artikel kali ini tentang Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.