jQuery Plugin : Nivo Slider 3.1
Nivo Slider adalah salah
satu Plugin jQuery yang bersifat open source untuk image slider yang
cukup popular dan gratis digunakan, Anda dapat mendownload plugin
jQuery image slider ini di (http://nivo.dev7studios.com/) . Saat
postingan ini ditulis Versi terbaru dari Nivo Slider adalah Nivo Slider
3.1 Kelebihan Nivo Slider ini selain mudah diimplementasikan juga
menggunakan 16 macam transition effects yang terus berganti-ganti
seacara random saat gambar berpindah-pindah dari gambar yang satu ke
gambar yang lain. Fitur yang terdapat dari Nivo Slider juga cukup
lengkap seperti direction navigasi, Kontrol navigasi dengan gambar
thumbnail atau hanya tanda point saja, dan menampilkan teks untuk
keterangan pada gambarnya.
Lihat Demo
Untuk menggunakan Plugin Jquery Nivo Slider 3.1 , Anda harus menggunakan minimum jQuery v1.4+ dan web browser yang mendukung seperti Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+. Untuk mencobanya anda membutuhkan file Jquery, Nivo Slider script, dan Nivo Slider CSS, Semua sudah anda dapatkan dalam satu paket ketika anda mendownloadnya secara gratis di situs resminya.
Cara menggunakan plugin ini juga tidak terlalu sulit, pertama adalah memanggil 3 file CSS dari Nivo Slider dan masukan di dalam tag <Head>
Untuk menggunakan Plugin Jquery Nivo Slider 3.1 , Anda harus menggunakan minimum jQuery v1.4+ dan web browser yang mendukung seperti Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+. Untuk mencobanya anda membutuhkan file Jquery, Nivo Slider script, dan Nivo Slider CSS, Semua sudah anda dapatkan dalam satu paket ketika anda mendownloadnya secara gratis di situs resminya.
Cara menggunakan plugin ini juga tidak terlalu sulit, pertama adalah memanggil 3 file CSS dari Nivo Slider dan masukan di dalam tag <Head>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Untuk mengatur ukuran
bagian slider gambar anda dapat membuka file nivo-slider.css kemudian
pada bagian class nivoSlider ubahlah ukuran width-nya. Anda juga dapat
mengatur sendiri tampilan image slider dengan memodifikasi file-file CSS
tersebut.
Selanjutnya adalah memanggil jQuery 1.7.1 dan plugin jQuery Nivo Slider 3.1 , Scriptnya adalah seperti berikut :
Selanjutnya adalah memanggil jQuery 1.7.1 dan plugin jQuery Nivo Slider 3.1 , Scriptnya adalah seperti berikut :
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
Anda juga perlu memanggil scriptnya menggunakan fungsi $(window).load()
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
Anda juga perlu memanggil scriptnya menggunakan fungsi $(window).load()
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Jangan sampai salah
menulis lokasi letak file-file jquery tersebut karena jika salah Image
slider tidak akan berjalan sebagaimana mestinya. Script-script diatas
dapat Anda letakan di dalam tag <Head><.Head> atau di dalam
Tag <Body></Body> ,
Setelah memanggil file CSS dan jQuery 1.7.1 serta plugin jQuery Nivo Slider 3.1 , Kita tinggal membuat untuk bagian Body halaman HTML nya.
Setelah memanggil file CSS dan jQuery 1.7.1 serta plugin jQuery Nivo Slider 3.1 , Kita tinggal membuat untuk bagian Body halaman HTML nya.
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/spiderman.jpg" data-thumb="images/spiderman.jpg" alt="" />
<a href="#"><img src="images/alice.jpg" data-thumb="images/alice.jpg" alt="" title= "deskripsi gambar" /></a>
<img src="images/im.jpg" data-thumb="images/im.jpg" alt="" data-
transition="slideInLeft" />
<img src="images/kungfupanda.jpg" data-thumb="images/kungfupanda.jpg"
alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
Contoh jika menggunakan teks atau caption<em>HTML</em> berupa<a
href="#">link</a>.
</div>
</div>
Dapat dijelaskan pada script diatas terdapat 4 macam gambar yang akan muncul secara bergantian dengan effect transition random. Gambar pertama adalah gambar spiderman.jpg kemudian alice.jpg yang akan muncul dengan title "deskripsi gambar", gambar ketiga adalah im.jpg khusus gambar ini akan muncul dengan effect transition slide dari kanan ke kiri karena data-transition menggunakan setingan slideInLeft . Dan gambar keempat adalah kungfupanda.jpg , gambar ini menggunakan caption html sebagai deskripsinya yang berupa script-script html seperti link dan script html lainnya. Anda dapat mengatur gambar-gambar slider tersebut dengan gambar yang anda inginkan tentunya dengan ukuran yang telah di sesuaikan dengan ukuran wrap slider tersebut. Untuk lebih jelas dan melihat hasilnya Anda dapat membuka file demo.html dari Plugin Jquery Nivo Slider 3.1 di Web Browser.
Untuk setingan Image slider dari Plugin Jquery Nivo Slider 3.1 dapat anda atur di file jquery.nivo.slider.js dibaris paling bawah di bagian Default settings-nya, kemudian mengatur seperti effect transition-nya, kecepatan animasi, menampilkan dan menghilangkan direction Navigasi, kontrol navigasi , kontrol thumb navigasi, dll.
Berikut ini adalah effect-effect transition yang mampu di tampilkan Nivo Slider 3.1
<div id="slider" class="nivoSlider">
<img src="images/spiderman.jpg" data-thumb="images/spiderman.jpg" alt="" />
<a href="#"><img src="images/alice.jpg" data-thumb="images/alice.jpg" alt="" title= "deskripsi gambar" /></a>
<img src="images/im.jpg" data-thumb="images/im.jpg" alt="" data-
transition="slideInLeft" />
<img src="images/kungfupanda.jpg" data-thumb="images/kungfupanda.jpg"
alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
Contoh jika menggunakan teks atau caption<em>HTML</em> berupa<a
href="#">link</a>.
</div>
</div>
Dapat dijelaskan pada script diatas terdapat 4 macam gambar yang akan muncul secara bergantian dengan effect transition random. Gambar pertama adalah gambar spiderman.jpg kemudian alice.jpg yang akan muncul dengan title "deskripsi gambar", gambar ketiga adalah im.jpg khusus gambar ini akan muncul dengan effect transition slide dari kanan ke kiri karena data-transition menggunakan setingan slideInLeft . Dan gambar keempat adalah kungfupanda.jpg , gambar ini menggunakan caption html sebagai deskripsinya yang berupa script-script html seperti link dan script html lainnya. Anda dapat mengatur gambar-gambar slider tersebut dengan gambar yang anda inginkan tentunya dengan ukuran yang telah di sesuaikan dengan ukuran wrap slider tersebut. Untuk lebih jelas dan melihat hasilnya Anda dapat membuka file demo.html dari Plugin Jquery Nivo Slider 3.1 di Web Browser.
Untuk setingan Image slider dari Plugin Jquery Nivo Slider 3.1 dapat anda atur di file jquery.nivo.slider.js dibaris paling bawah di bagian Default settings-nya, kemudian mengatur seperti effect transition-nya, kecepatan animasi, menampilkan dan menghilangkan direction Navigasi, kontrol navigasi , kontrol thumb navigasi, dll.
Berikut ini adalah effect-effect transition yang mampu di tampilkan Nivo Slider 3.1
· sliceDown
· sliceDownLeft
· sliceUp
· sliceUpLeft
· sliceUpDown
· sliceUpDownLeft
· fold
· fade
· random
· slideInRight
· slideInLeft
· boxRandom
· boxRain
· boxRainReverse
· boxRainGrow
· boxRainGrowReverse
Sumber : Klik disini
Tidak ada komentar