Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery

Selamat datang di laman tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya yang akan selalu memberikan tips dan trik seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips mengenai Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery sekaligus mengenalkan mengenai plugin lightgallery. Memang benar-benar 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 diantara nya plugin lightgallery ini, selain menarik tampilannya pun memberikan user alternatif di pada tampilan. Apa itu pilihannya, di gambar di bawah ini teman – teman dapat lihat kotak – kotak yang saya beri warna yang berbeda.



Selamat



Nah dapat kalian lihat di gambar di atas ini benar-benar banyak sekali manfaat 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 : unduh image


  • kotak putih : close



Banyak sekali bukan manfaat nya, oke seketika saja kita praktekkan Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery. Teman – teman unduh 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 bagi menempilkan image nya



Selamat



Kemudian hubungkan css nya



Selamat



<link href=css/lightgallery.css rel=stylesheet>
<link rel=stylesheet type=text/css href=css/style.css>


Kemudian load plugin nya yang telah teman – teman unduh



Selamat



<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>


Bila telah save dengan nama index.html dan jalankan di browsernya, karenanya slide show dengan plugin lightgallery berhasil di bikin. Dengan ini akan banyak alternatif kalian bagi pop up slide slow di laman nya. Bagus, sekianlah di artikel kali ini mengenai Membuat Pop Up Slide Show Dengan Plugin jQuery Lightgallery kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more