Konfigurasi jQuery Nivo Slider

Minggu, 19 Februari 2012

Tabel Konten

Nivo adalah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya saat pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang dapat Anda gunakan di dalamnya. Dimulai dari menentukan efek spesifik, kontrol navigasi sampai kepada fungsi-fungsi tambahan. Namun pada intinya, Nivo adalah slider yang bisa bekerja pada sebagian besar versi jQuery:

Lihat Demo Unduh Semua Contoh

Kerangka Dasar

Nivo Slider terbentuk dari beberapa elemen <img> yang diliputi oleh elemen <div class="nivoSlider"></div>. Ini adalah markup HTML minimalnya:

HTML

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NivoSlider Demo - Basic</title>
    <link href="css/demo.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>

    <div class="nivoSlider" id="nivoSlider">
      <img src="img/1.jpg" alt="" title="Slider Caption 1">
      <img src="img/2.jpg" alt="" title="Slider Caption 2">
      <img src="img/3.jpg" alt="" title="Slider Caption 3">
      <img src="img/4.jpg" alt="" title="Slider Caption 4">
    </div>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.nivo.slider.min.js"></script>
    <script>
      $(window).load(function() {
        $('#nivoSlider').nivoSlider();
      });
    </script>

  </body>
</html>

CSS

/*
 * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 * Style by Taufik Nurrohman <http://gplus.to/tovic>
 */

#slider-wrapper {
  width:618px;
  margin:30px auto;
  padding:2px;
  background-color:black;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,.4);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}

.nivoSlider {
  position:relative;
  background:white url('loading.gif') no-repeat 50% 50%;
  width:618px; /* Make sure your images are the same size */
  height:246px; /* Make sure your images are the same size */
}

.nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.nivoSlider a {
  border:none;
  display:block;
}

.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}

/* The slices and boxes in the slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}

.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}

.nivo-caption {
  font:normal bold 12px/normal Arial,Sans-Serif;
  position:absolute;
  left:0;
  bottom:0;
  background-color:black;
  color:white;
  opacity:.8; /* Overridden by `captionOpacity` setting */
  width:100%;
  z-index:8;
}

.nivo-caption a {
  color:white;
  border-bottom:1px dotted white;
}

.nivo-caption a:hover {color:#ffa}

.nivo-caption p {
  padding:8px 10px;
  margin:0;
}

.nivo-html-caption {display:none}
.nivoSlider .nivo-caption a {display:inline}

/* Direction nav styles (e.g. "Next" & "Prev") */
.nivo-directionNav a {
  border:none;
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  margin-top:-15px;
  z-index:9;
  background:transparent url('arrows.png') no-repeat 0 0;
  text-indent:-9999px;
  cursor:pointer;
}

a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}

a.nivo-prevNav {left:15px}

/* Control nav styles (e.g. 1, 2, 3 ...) */
.nivo-controlNav {
  position:absolute;
  top:10px;
  right:15px;
}

.nivo-controlNav a {
  font:normal normal 10px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  position:relative;
  z-index:9;
  cursor:pointer;
  background-color:#111;
  width:17px;
  padding:2px 0 3px;
  margin:0 0 0 4px;
  text-align:center;
  display:inline-block;
  *display:inline;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.nivo-controlNav a.active {background-color:#39f}

Untuk menjalankan slider, terapkan method .nivoSlider() secara langsung pada elemen pembungkusnya. Konfigurasi ini akan mengubah daftar gambar menjadi slider dengan opsi bawaan dari skrip Nivo yang telah terpasang:

$(window).load(function() {
    $('#nivoSlider').nivoSlider();
});

Konfigurasi jQuery Nivo Slider

Opsi	Keterangan
effect	Digunakan untuk menentukan efek transisi spesifik (normal: `"random"`)
slices	Digunakan untuk menentukan jumlah potongan (jumlah potongan gambar vertikal) (normal: `15`)
boxCols	Digunakan untuk menentukan jumlah kolom pada efek berupa blok-blok potongan gambar (normal: `8`)
boxRows	Digunakan untuk menentukan jumlah baris pada efek berupa blok-blok potongan gambar (normal: `4`)
animSpeed	Digunakan untuk menentukan kecepatan animasi (normal: `500`)
pauseTime	Digunakan untuk menentukan seberapa lama slide akan berhenti sebelum memulai berganti menuju slide berikutnya (normal: `3000`)
startSlide	Digunakan untuk menentukan urutan slide yang akan terlihat lebih dulu saat slideshow dimulai. Indeks dimulai dari `0` (normal: `0`)
directionNav	Jika bernilai `false`, navigasi Next & Prev tidak akan ditampilkan (default: `true`)
directionNavHide	Jika bernilai `false`, navigasi Next & Prev akan selalu terlihat. Jika bernilai `true`, navigasi Next & Prev akan menghilang, namun akan tampil ketika pointer berada di atas slider (normal: `true`)
controlNav	Jika bernilai `false`, navigasi 1, 2, 3, … tidak akan ditampilkan (normal: `true`)
controlNavThumbs	Jika bernilai `true`, navigasi 1, 2, 3, … akan berubah menjadi thumbnail, namun opsi ini membutuhkan sedikit modifikasi khusus pada CSS yang nanti akan kita bahas di bawah (normal: `false`)
controlNavThumbsFromRel	Jika bernilai `true`, navigasi thumbnail akan mengambil data URL thumbnail dari atribut `rel` di dalam setiap gambar (normal: `false`)
keyboardNav	Jika bernilai `false`, fitur navigasi slideshow menggunakan papan ketik akan dinonaktifkan (normal: `true`)
pauseOnHover	Jika bernilai `false`, animasi slide akan terus berjalan meskipun pointer sedang berada di atas slide (normal: `true`)
manualAdvance	Jika bernilai `true`, efek perpindahan slide akan dilakukan secara manual, yaitu dengan cara mengeklik navigasi Next & Prev atau 1, 2, 3, … atau menggunakan tombol panah pada papan ketik (normal: `false`)
captionOpacity	Digunakan untuk menentukan tingkat transparasi deskripsi slide (image caption). Sebenarnya ini tidak terlalu penting dan hanya digunakan untuk menangani validasi dan masalah cross-browser untuk efek CSS transparasi (normal: `0.8`)
prevText	Digunakan untuk menentukan teks navigasi Previous (normal: `"Prev"`)
nextText	Digunakan untuk menentukan teks navigasi Next (normal: `"Next"`)

Lebih Detail

Di sini Saya hanya akan memberikan sedikit halaman demo. Untuk demo selengkapnya sudah ada di dalam berkas unduhan.

Menentukan Efek Spesifik

Nivo memiliki beberapa efek di dalamnya yang secara normal akan ditampilkan secara acak. Efek-efek tersebut diantaranya bisa Anda lihat di dalam kode sumber jquery.nivo.slider.js pada bagian ini:

if(settings.effect == 'random') {var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');    currentEffect = anims[Math.floor(Math.random() * (anims.length + 1))];
    if (currentEffect == undefined) currentEffect = 'fade';
}

Sebagai contoh, jika Anda menginginkan efek sliceUpRight dan sliceDownRight saja, caranya cukup dengan menuliskannya seperti ini:

$('#nivoSlider').nivoSlider({
    effect: 'sliceUpRight,sliceDownRight'
});

Lihat Demo

Memodifikasi Jumlah Slice

Secara normal, jumlah slice adalah 15 dan box sebanyak 8 × 4. Namun kita bisa memodifikasi jumlahnya. Yang penting pastikan saja Anda menggunakan angka-angka yang tepat sesuai dengan pembagian lebar dan tinggi gambar agar hasilnya tidak berantakan. Misalnya, jika ukuran gambar yang digunakan untuk membuat slider adalah 200 × 100, buatlah jumlah slice sebanyak 10 atau 20 dan jangan membuat jumlah slice sebanyak 13, 17, 70, … karena ini akan membuat slider menjadi tersentak-sentak. Selain itu jangan terlalu banyak menciptakan slice, itu akan membuat peramban menjadi macet (biasanya muncul peringatan: the script on this page is too busy blah blah blah…):

$('#nivoSlider').nivoSlider({
    slices: 20, // Menentukan jumlah slice sebanyak 20
    boxCols: 5, // Menentukan jumlah kolom sebanyak 5
    boxRows: 4  // Menentukan jumlah baris sebanyak 4
});

Lihat Demo

Mengubah Kecepatan Animasi

Kecepatan animasi bisa diubah dengan mudah:

$('#nivoSlider').nivoSlider({
    animSpeed: 1000, // Menentukan kecepatan animasi
    pauseTime: 2000  // Menentukan lama waktu tunda sebeum animasi berpindah ke slide berikutnya terjadi
});

Menampilkan Slide ke 4 Terlebih Dahulu

Dalam JavaScript, urutan umumnya dimulai dari 0, jadi pastikan Anda tidak keliru dengan ini. Jika ingin menampilkan slide ke empat sebagai slide pertama yang ditampilkan, maka Anda harus menuliskan nilai 3 pada opsi startSlide:

$('#nivoSlider').nivoSlider({
    startSlide: 3 // Urutan ke empat
});

Lihat Demo

Menghilangkan Semua Navigasi

Menghilangkan semua navigasi dapat dilakukan dengan cara menuliskan nilai false pada semua opsi yang berhubungan dengan navigasi jalan pintas. Jika perlu, nonaktifkan juga fitur navigasi dengan papan ketik sehingga pengunjung tidak akan bisa melakukan apapun kecuali menatap slider sampai pertunjukan berakhir. Ini jika Anda ingin menguji kesabaran pengunjung:

$('#nivoSlider').nivoSlider({
    directionNav: false,
    controlNav: false,
    keyboardNav: false
});

Lihat Demo

Mengubah Teks Navigasi `Next & Prev`

Secara normal, navigasi Next & Prev tidak akan menampilkan teks apapun. Karena di dalam temanya indentasi teks memang sudah diset agar tidak terlihat untuk mengubah tampilannya menjadi berupa gambar panah kiri dan kanan:

.nivo-directionNav a {
  border:none;
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  margin-top:-15px;
  z-index:9;
  background:transparent url('arrows.png') no-repeat 0 0;text-indent:-9999px;  cursor:pointer;
}

Hal yang sama juga terjadi pada navigasi 1, 2, 3, …

.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:transparent url('bullets.png') no-repeat 0 0;text-indent:-9999px;  border:none;
  margin-right:3px;
  float:left;
}

Jika Anda menginginkan navigasi Next & Prev dengan keterangan berupa teks, Anda perlu memodifikasi CSS di dalam temanya:

.nivo-directionNav a {
  width:auto;
  height:auto;text-indent:0;  background-image:none;
  background-color:black;
  font:normal bold 10px/normal Verdana,Arial,Sans-Serif;
  color:white;
  padding:5px 8px 6px;
}

.nivo-directionNav a:hover {background-color:#39f}

$('#nivoSlider').nivoSlider({
    prevText: 'Sebelumnya',
    nextText: 'Berikutnya'
});

Nivo Slider Navigasi Next & Prev — Navigasi Next & Prev

Lihat Demo

Nivo Slider dengan Thumbnail

Nivo Slider memiliki beberapa hal yang akan membuat semua pengaturan menjadi jauh lebih praktis dan masuk akal. Pertama, teks di dalam caption (pita hitam berisi deskripsi slide) diproduksi dari atribut title pada gambar. Begitu pula dengan thumbnail. Untuk mengaktifkan thumbnail pada NioSlider, syarat pertama yang harus Anda penuhi adalah membuat beberapa gambar berukuran kecil sebagai thumbnail, kemudian memasukkan URL gambar tersebut ke dalam atribut rel yang telah ditambahkan ke dalam setiap gambar:

<div class="nivoSlider" id="nivoSlider">
    <img src="img/1.jpg" alt="" title="Slider Caption 1" rel="img/1_thumb.jpg">
    <img src="img/2.jpg" alt="" title="Slider Caption 2" rel="img/2_thumb.jpg">
    <img src="img/3.jpg" alt="" title="Slider Caption 3" rel="img/3_thumb.jpg">
    <img src="img/4.jpg" alt="" title="Slider Caption 4" rel="img/4_thumb.jpg">
</div>

Setelah atribut rel ditambah, maka thumbnail akan secara otomatis terbentuk di dalam kontrol navigasi. Namun saat ini thumbnail masih tidak bisa terlihat karena pengaturan normal dalam CSS dan dalam plugin masih belum mengizinkan untuk menampilkan gambar. Anda harus memodifikasi kode CSS di dalamnya untuk mengaktifkan thumbnail dan mengaktifkan fitur navigasi thumbnail pada pengaturan (baca: Using Thumbnail with the Nivo Slider)

.nivo-controlNav {
  top:100%;
  right:0;
  left:0;
  text-align:center;
  margin-top:15px;
}

.nivo-controlNav a {width:auto;  height:auto;  padding:0;
  background:none;
}
.nivo-controlNav img {display:block;  position:relative;
  border:2px solid #111;
  opacity:.8;
}
.nivo-controlNav a.active img {opacity:1}

$('#nivoSlider').nivoSlider({
    controlNavThumbs: true,
    controlNavThumbsFromRel: true,
    controlNavThumbsSearch: '.jpg',
    controlNavThumbsReplace: '_thumb.jpg'
});

Lihat Demo

Callback

Sedikit tambahan. Pada bagian bawah Anda akan melihat beberapa fungsi kosong seperti berikut:

$('#nivoSlider').nivoSlider({
    ...
    ...
    beforeChange: function() {},
    afterChange: function() {},
    slideshowEnd: function() {},
    lastSlide: function() {},
    afterLoad: function() {}
});

Itu semua adalah fungsi-fungsi kosong yang nantinya bisa Anda gunakan untuk membuatnya bekerja pada waktu-waktu tertentu:

Opsi	Keterangan
beforeChange	Digunakan untuk menjalankan aksi sebelum slide berganti.
afterChange	Digunakan untuk menjalankan aksi setelah slide berganti.
slideshowEnd	Digunakan untuk menjalankan aksi setelah slideshow berakhir.
lastSlide	Digunakan untuk menjalankan aksi saat animasi telah mencapai slide terakhir.
afterLoad	Digunakan untuk menjalankan aksi saat slider telah selesai (baru saja selesai) dimuat.

Katakanlah kita akan menciptakan fungsi-fungsi tambahan yang akan dijalankan secara otomatis berdasarkan pembagian waktu seperti pada tabel di atas. Ini cuma contoh saja. Dalam kenyataannya, fungsi bisa bermacam-macam. Di sini Saya akan menggunakan jQuery .text() dan .append() sebagai percobaan:

$('#slider').nivoSlider({
    manualAdvance: true,
    beforeChange: function() {
        $('#callback-message').append('Next slide...<br>');
    },
    afterChange: function() {
        $('#callback-message').append('Slide changed.<br>');
    },
    slideshowEnd: function() {
        $('#callback-message').append('The end!<br>');
    },
    lastSlide: function(){
        $('#callback-message').append('This is the last slide!<br>');
    },
    afterLoad: function(){
        $('#callback-message').append('Starting slideshow...<br>');
    }
});

Kemudian kita buat elemen #callback-message sebagai penampil pesan:

<p id="callback-message">Teks akan masuk di sini...</p>

Sampai di sini Saya rasa cukup mudah dipahami:

Lihat Demo

Terakhir…

Jangan terpaku pada tema yang itu-itu saja. Cobalah untuk mengubah posisi navigasi, deskripsi slide, warna latar dan yang lain untuk menciptakan tema sendiri. Semoga sukses!

Lihat Demo

74 Komentar

Randy

Sabtu, 14 April 2012 08:18 PM

bang sya ingin tanya,gimana kalo slider ini disatukan js nya dengan js readmore otomatis utk recent post kita,jadi dihome dia munculnya gini bang :D kalo bisa PM saya ya thanks alot