Konfigurasi JQuery Nivo Slider

Nivo adalah JQuery slider yang paling fleksibel dalam hal konfigurasi. 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 Download Semua Contoh

Kerangka Dasar

Slider Nivo dibangun dari elemen <img> yang diliputi oleh elemen <div class='nivoSlider'></div>:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Demo Nivo Slider</title>
        <link rel='stylesheet' href='style/style.css' type='text/css'></link>
        <script type='text/javascript' src='scripts/jquery.js'></script>
        <script type='text/javascript' src='scripts/jquery.nivo.slider.js'></script>
    </head>
    <body>
        <div class='nivoSlider'>
            <a href='#'><img src='images/1.jpg' alt='' title='Aku tidak akan pernah tahu' /></a>
            <a href='#'><img src='images/2.jpg' alt='' title='Bahwa ini dan mereka itu tidak akan pernah identik' /></a>
            <a href='#'><img src='images/3.jpg' alt='' title='Sebuah kenyataan yang lucu' /></a>
            <a href='#'><img src='images/4.jpg' alt='' title='Meski seringkali begitu menyakitkan' /></a>
        </div>

        <script type='text/javascript'>
            $(window).load(function() {
                $('div.nivoSlider').nivoSlider();
            });
        </script>
    </body>
</html>

CSS

.nivoSlider {
  position:relative;
  background:#fff url(loading.gif) no-repeat 50% 50%;
  width:618px;  /* Samakan dengan lebar gambar */
  height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

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

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

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
   berupa potongan-potongan gambar */

.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}

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

/* Deskripsi setiap slide */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8;
  width:100%;
  z-index:8;
}

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

.nivo-caption a    {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
  position:absolute;
  top:10px;
  right:15px;
}

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

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}

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

/* Detail caption gambar */
.nivo-caption         {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a       {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Untuk menjalankan slider cukup dengan menerapkan fungsi .nivoSlider() secara langsung pada elemen pembungkusnya. Kode di bawah ini akan mengubah daftar gambar menjadi slider dengan opsi default dari script Nivo yang telah terpasang:

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

Konfigurasi JQuery Nivo Slider

Opsi	Keterangan
effect	Menentukan efek transisi spesifik (default:random)
slices	Menentukan jumlah slice (jumlah potongan gambar vertikal) (default:15)
boxCols	Menentukan jumlah kolom untuk efek berupa blok-blok potongan gambar (default:8)
boxRows	Menentukan jumlah baris untuk efek berupa blok-blok potongan gambar (default:4)
animSpeed	Menentukan kecepatan animasi (default:500)
pauseTime	Menentukan lama slide berhenti sebelum memulai berganti menuju slide berikutnya (default:3000)
startSlide	Menentukan slide nomor ke berapa yang akan terlihat lebih dulu saat slideshow dimulai (default:0)
directionNav	Jika bernilai `false`, navigasi Next & Prev akan menghilang (default:true)
directionNavHide	Jika bernilai `false`, navigasi Next & Prev akan selalu terlihat (default:true :: navigasi akan disembunyikan saat pointer berada di luar slider)
controlNav	Jika bernilai `false`, navigasi 1, 2, 3, ... akan menghilang (default:true)
controlNavThumbs	Jika bernilai `true`, navigasi 1, 2, 3, ... akan berubah menjadi thumbnail gambar, namun opsi ini memiliki beberapa syarat tambahan (default:false)
controlNavThumbsFromRel	Jika bernilai `true`, navigasi thumbnail gambar akan mengambil data URL gambar thumbnail dari atribut `rel` di dalam setiap slide (default:false)
keyboardNav	Jika bernilai `false`, fasilitas navigasi menggunakan keyboard akan dinonaktifkan (default:true)
pauseOnHover	Jika bernilai `false`, animasi slide akan terus berjalan meskipun pointer sedang berada di atas slide (default: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 keyboard (default:false)
captionOpacity	Menentukan tingkat transparasi deskripsi slide (caption gambar). Sebenarnya ini tidak terlalu penting dan hanya digunakan untuk mengatasi masalah validasi CSS transparasi (default:0.8)
prevText	Menentukan teks navigasi Previous (default:'Prev')
nextText	Menentukan teks navigasi Next (default:'Next')

Lebih Detail

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

Menentukan Efek Spesifik

Nivo memiliki beberapa efek di damanya. Normalnya akan ditampilkan secara acak. Efek-efek tersebut diantaranya bisa Anda lihat di dalam kode sumber jquery.nivo.slider.js:

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

Sebagai contoh, jika Anda menginginkan efek sliceUpRight saja, caranya cukup dengan menuliskan opsi effect:'sliceUpRight':

$('div.nivoSlider').nivoSlider({effect:'sliceUpRight'});

Memodifikasi Jumlah Slice

Secara normal, jumlah slice adalah 15 dan box sebanyak 8 × 4. Namun kita bisa memodifikasinya. Yang penting pastikan saja Anda menggunakan angka-angka yang 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 macet untuk sesaat (misalnya muncul peringatan: the script on this page is too busy blah blah blah...):

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

Mengubah Kecepatan Animasi

Kecepatan animasi bisa diubah dengan mudah. Saya rasa setelah Anda membaca tabel Anda bisa dengan mudah memahami ini:

$('div.nivoSlider').nivoSlider({
    animSpeed:1000,
    pauseTime:2000
});

Menampilkan Slide ke 4 Terlebih Dahulu Sebagai Pemicu Pertama

Dalam JavaScript, urutan objek 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:

$('div.nivoSlider').nivoSlider({startSlide:3});

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 fasilitas navigasi keyboard sehingga pengunjung tidak akan bisa melakukan apapun kecuali menatap slider sampai pertunjukan berakhir. Ini jika Anda ingin menguji kesabaran pengunjung:

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

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 {
  display:block;
  width:30px;
  height:30px;
  background:url(arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}

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

.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  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 {
  display:block;
  border:0;
  color:white;
  font:bold 10px Verdana,Arial,Sans-Serif;
  background-color:black;
  padding:5px 8px 6px;
}

.nivo-directionNav a:hover {background-color:#3399ff;}

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

Nivo Slider Navigasi Next & Prev — Navigasi Next & Prev

Nivo Slider dengan Thumbnail

Nivo 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 menciptakan thumbnail, syarat pertama yang harus Anda penuhi adalah membuat beberapa gambar kecil sebagai thumbnail kemudian memasukkan URL gambar tersebut ke dalam atribut rel yang telah ditambahkan ke dalam setiap gambar:

<div class='nivoSlider'>
    <a href='#'><img src='images/1.jpg' alt='' title='Judul 1' rel='images/1_thumb.jpg' /></a>
    <a href='#'><img src='images/2.jpg' alt='' title='Judul 2' rel='images/2_thumb.jpg' /></a>
    <a href='#'><img src='images/3.jpg' alt='' title='Judul 3' rel='images/3_thumb.jpg' /></a>
    <a href='#'><img src='images/4.jpg' alt='' title='Judul 4' rel='images/4_thumb.jpg' /></a>
</div>

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

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
  margin:0px 1px;
  display:inline-block;
  *display:inline;
}

.nivo-controlNav img {
  display:block;
  position:relative;
  border:2px solid #111;
  opacity:0.7;
}

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

Lihat Demo

Callback

Sedikit tambahan. Pada bagian bawah Anda akan melihat beberapa kode berikut:

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

Itu semua adalah fungsi-fungsi kosong yang bisa Anda modifikasi berdasarkan waktu fungsi tersebut dijalankan:

Opsi	Keterangan
beforeChange	Digunakan untuk menjalankan aksi sebelum slide berganti
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 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 fungsi alert() sebagai percobaan:

$('#slider').nivoSlider({
    animSpeed: 1000,
    pauseTime: 5000,
    beforeChange: function() {
        $('#indikator').text('Mengganti slide...');
    },
    afterChange: function() {
        $('#indikator').text('Slide terganti');
    },
    slideshowEnd: function() {
        $('#indikator').text('Slideshow berakhir!');
    },
    lastSlide: function() {
        $('#indikator').fadeOut().fadeIn();
    },
    afterLoad: function() {
        alert('Selamat datang!');
    }
});

Kemudian kita ciptakan elemen #indikator sebagai objek sasaran:

<h2 id='indikator'>Teks akan masuk di sini...</h2>

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!

sumber : http://test-hompimpa.blogspot.com

Desa Kreasi Mahar Palembang

Search This Blog

Konfigurasi JQuery Nivo Slider

Kerangka Dasar

HTML

CSS

Konfigurasi JQuery Nivo Slider

Lebih Detail

Menentukan Efek Spesifik

Memodifikasi Jumlah Slice

Mengubah Kecepatan Animasi

Menampilkan Slide ke 4 Terlebih Dahulu Sebagai Pemicu Pertama

Menghilangkan Semua Navigasi

Mengubah Teks Navigasi Next & Prev

Nivo Slider dengan Thumbnail

Callback

Terakhir...

Comments

Post a Comment