Plugin Gallery Lightbox untuk Semua Platform
- Administrator
- Gallery post, , , Blogger, Blog wordpress, ,
- 2009 Kali Dilihat
- 0 Komentar
Plugin Gallery Lightox
Plugin GalleryLightox adalah sebuah plugin jquery untuk membuat galeri sederhana dengan lightbox, cocok dan dapat digunakan untuk hampir semua platform cms. Begitu mudah digunakan, sangat keren, dan memiliki beberapa fungsi untuk website atau blog yang anda miliki.
Sebelum menggunakan, anda harus Mengunduh Gallery Lightbox Package, meletakan pada root directory website atau blog anda, kemudian memanggil perpustakaan Gallery Lightbox seperti ditunjukkan di bawah.
Pelajari Cara menambah elemen detail galeri
<!-- Add this inside <head> tag -->
<link rel="stylesheet" type="text/css" href="root_directory/css/mygallery.css"/><!-- Add this before </body> -->
<script type="text/javascript" src="root_directory/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="root_directory/js/mygallery.js"></script>Contoh 1
Membuat Grid Gallery Lightbox dengan struktur html sederhana:
<div class="mygallerylightbox1">
<a href="images/1.jpg" title="Lorem ipsum dolor sit amet"><img src="images/1.jpg" alt="Gambar 1"/></a>
<a href="images/2.jpg" title="Lorem ipsum dolor sit amet 2"><img src="images/2.jpg" alt="Gambar 2"/></a>
<a href="images/3.jpg" title="Lorem ipsum dolor sit amet 3"><img src="images/3.jpg" alt="Gambar 3"/></a>
<a href="images/4.jpg" title="Lorem ipsum dolor sit amet 4"><img src="images/4.jpg" alt="Gambar 4"/></a>
<a href="images/5.jpg" title="Lorem ipsum dolor sit amet 5"><img src="images/5.jpg" alt="Gambar 5"/></a>
<a href="images/6.jpg" title="Lorem ipsum dolor sit amet 6"><img src="images/6.jpg" alt="Gambar 6"/></a>
<a href="images/7.jpg" title="Lorem ipsum dolor sit amet 7"><img src="images/7.jpg" alt="Gambar 7"/></a>
<a href="images/8.jpg" title="Lorem ipsum dolor sit amet 8"><img src="images/8.jpg" alt="Gambar 8"/></a>
<a href="images/9.jpg" title="Lorem ipsum dolor sit amet 9"><img src="images/9.jpg" alt="Gambar 9"/></a>
<a href="images/10.jpg" title="Lorem ipsum dolor sit amet 10"><img src="images/10.jpg" alt="Gambar 10"/></a>
</div> Url pertama adalah url gambar utama. Url kedua adalah url gambar thumbnail. Anda dapat menggunakan gambar yang berbeda untuk thumbnail.
Baca juga tentang Membuat Galeri atau Slider Post
Tambahkan jquery seperti tampak dibawah ini, diatas tag </body>
<script type="text/javascript">
$(document).ready(function() {
$(".mygallerylightbox1").mygallery({
grid: 6
});
});
</script>Angka 6 didalam jquery diatas menunjukan jumlah grid dalam gallery. Dan dibawah ini adalah hasil Gallery Lightbox yang kita buat dengan grid 6:
Contoh 2
Jika anda Ingin membuat sebuah gallery tanpa grid, atau anda ingin menggunakan gaya desain anda sendiri. Nilai yang harus anda rubah adalah grid: 6 dalam jquery tersebut diatas.
Berikut adalah contoh gallery tanpa grid, dengan merubah grid: 6 menjadi grid: 0
<script type="text/javascript">
$(document).ready(function() {
$(".mygallerylightbox2").mygallery({
grid: 0
});
});
</script>Hasilnya seperti tampak dibawah ini:
Contoh 3
Lightbox hanya untuk satu gambar
Jika Anda ingin hanya menetapkan lightbox untuk satu gambar, atau beberapa gambar yang tidak berhubungan satu sama lain Anda dapat mencoba metode berikut.
<script type="text/javascript">
$(document).ready(function() {
$(".img-post").justlightbox();
});
</script>Berikut contoh dari jquery diatas:
Pada contoh ke 3 ini biasanya digunakan dalam sebuah blog atau website yang memberikan artikel-artikel untuk tujuan sebagai tutorial.
DEMO Gallery Lightbox
~ Silahkan Unduh Plugin Gallery Lightbox dan selamat mencoba! ~
