Membuat Pop Up Dengan Plugin jQuery nanogallery

Halo semuanya, apa kabar..??

Selamat datang di website tips dan trik Dumet School, pada pertemuan kali ini saya akan memberikan tips dan trik tentang Membuat Pop Up Dengan Plugin jQuery nanogallery dimana dalam pembuatannya kita menggunakan Plugin jQuery. Type plugin ini bernama nanogallery  yang memiliki beberapa fitur diantaranya

  • Shuffle thumbnails
  • 3D rotate
  • Parallax
  • Image rotate
  • Popout thumbnails

Masing – masing fitur ini tentunya memiliki efek yang berbeda – beda dan menarik, untuk teman – teman bisa dijadikan refrensi untuk di pakai di website nya dengan menggunakan plugin ini. Pada latihan kali ini kita akan implementasikan semua fitur yang ada di plugin nanogallery.

Baik kita langsung saja praktekkan Membuat Pop Up Dengan Plugin jQuery nanogallery , teman – teman siapkan text editornya dan kita install terlebih dahulu atau kita load saja link plugin nya.

Pertama kita load terlebih dahulu jQuery nya

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Selanjutnya kita load nano css dan nano js nya

<link href="https://unpkg.com/nanogallery2@1.4.0/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"><br><script type="text/javascript" src="https://unpkg.com/nanogallery2@1.4.0/dist/jquery.nanogallery2.min.js"></script>

Jika sudah teman – teman berikan script di bawah ini untuk menghasilkan nanogallery dengan fitur Shuffle thumbnails

<!-- Shuffle thumbnails -->
<div id="nanogallery2" data-nanogallery2='{
 "thumbnailHeight": 210, "thumbnailWidth": 210,
 "thumbnailL1GutterWidth": 40,
 "thumbnailL1GutterHeight": 40,
 "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
 "thumbnailStacks": 4,
 "thumbnailStacksTranslateZ": 0.3,
 "thumbnailStacksRotateX": 0.9,
 "galleryBuildInit2": "perspective_900px|perspective-origin_50% 150%",
 "thumbnailHoverEffect2": "thumbnail_translateZ_0px_100px_easeOutQuad_400 | thumbnail_rotateX_0deg_10deg_easeOutBack_200 | thumbnail_rotateX_10deg_0deg_delay250_keyframe_hoverin_easeOutBack_400"
 }'>
 
 <!-- IMAGES -->
 <a href="berlin1.jpg" data-ngthumb="berlin1_t.jpg">Berlin 1</a>
 <a href="berlin2.jpg" data-ngthumb="berlin2_t.jpg">Berlin 2</a>
 <a href="berlin3.jpg" data-ngthumb="berlin3_t.jpg">Berlin 3</a>
 </div>

Oia hampir lupa, teman – teman juga siapkan foto apa saja ya untuk kita tampilkan pada pop up nya lalu panggil masing – masing image nya. Jika sudah save dengan nama index.html dan jalankan pada browser nya, maka akan menghasilkan pop up nanogallery dengan fitur Shuffle thumbnails

Membuat Slide Show Dengan Plugin jQuery nanogallery

Seperti yang teman – teman lihat pada gambar di atas ini ketika mouse di arahkan akan ada hover dan ketika di klik maka pop up nanogallery akan tampil

Membuat Pop Up Dengan Plugin jQuery nanogallery

Nah untuk fitur – fitur lainnya teman – teman tinggal dirubah saja dengan mengganti script nya

Membuat Pop Up Dengan Plugin jQuery nanogallery

Saya sudah siapkan script untuk masing – masing fitur nanogallery, teman – teman tinggal download di link ini dan bisa di jadikan pilihan untuk fitur pop up nya pada website kalian.

Baik, sekian dulu pada tips kali ini tentang Membuat Pop Up Dengan Plugin jQuery nanogallery kita berjumpa kembali pada artikel yang akan datang. Terimakasih dan sampai Jumpa.

Semoga bermanfaat 🙂

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *