Cara Membuat IFrame Menggunakan Lity
Sebelum kita lebih jauh ke pembahasan, kita harus lebih tau dulu apa itu Lity. Lity adalah sebuah plugin lightbox yang sangat ringan, yang mudah diakses, dan responsif yang mendukung gambar, iframe, dan konten inline di luar kotak. Jadi, dengan adanya lity ini kita bisa membuat iframe lebih gaul dan terkesan lebih modern.
Kita juga bisa membuat sebuah popup agar sebuah tampilan berada di halaman tersebut tanpa harus menuju ke halaman aslinya.
Baca juga :
Baca juga :
Cara Membuat IFrame Menggunakan Lity
Berikut langkah-yang harus kita lakukan agar dapat menggunakan Plugin Lity pada website kita.
- Download fie atau asset Lity pada websitenya
- Upload asset tersebut pada cpanel web anda
- Jika semua file yang siap digunakan sudah terupload, silahkan pasang script javascript dan css Lity beserta dependensinya dalam dokumen HTML :
<link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>
Nb : sesuaikan dengan folder tempat anda menyimpan
- Jika semua sudah siap silahkan tambahakan data-lity pada attribute to <a> ke <a> elemen yang Anda inginkan tautannya dibuka di lightbox.
Untuk Image :
<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
Untuk YouTube:
<a href="#inline" data-lity>Inline</a>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
Untuk Vimeo:
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
Untuk Google Map:
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
Jika masih bingung dengan cara pemasang dan menggunakan Litty berikut sudah saya siapkan dalam bentu video :