Konfigurasi Jquery Nivo Slider - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Konfigurasi Jquery Nivo Slider
ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider

Nivo ialah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya ketika pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang sanggup Anda gunakan di dalamnya. Dimulai dari memilih imbas spesifik, kontrol navigasi hingga kepada fungsi-fungsi tambahan. Namun pada intinya, Nivo ialah slider yang sanggup 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 ialah 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=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/2.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/3.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/4.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">     </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}
ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider
Detail Nivo Slider

Untuk menjalankan slider, terapkan method .nivoSlider() secara pribadi 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 memilih imbas transisi spesifik (normal: "random")
slices Digunakan untuk memilih jumlah potongan (jumlah potongan gambar vertikal) (normal: 15)
boxCols Digunakan untuk memilih jumlah kolom pada imbas berupa blok-blok potongan gambar (normal: 8)
boxRows Digunakan untuk memilih jumlah baris pada imbas berupa blok-blok potongan gambar (normal: 4)
animSpeed Digunakan untuk memilih kecepatan animasi (normal: 500)
pauseTime Digunakan untuk memilih seberapa usang slide akan berhenti sebelum memulai berganti menuju slide berikutnya (normal: 3000)
startSlide Digunakan untuk memilih urutan slide yang akan terlihat lebih dulu ketika 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 bermetamorfosis 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 memakai 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, imbas perpindahan slide akan dilakukan secara manual, yaitu dengan cara mengeklik navigasi Next & Prev atau 1, 2, 3, … atau memakai tombol panah pada papan ketik (normal: false)
captionOpacity Digunakan untuk memilih tingkat transparasi deskripsi slide (image caption). Sebenarnya ini tidak terlalu penting dan hanya dipakai untuk menangani validasi dan duduk perkara cross-browser untuk imbas CSS transparasi (normal: 0.8)
prevText Digunakan untuk memilih teks navigasi Previous (normal: "Prev")
nextText Digunakan untuk memilih teks navigasi Next (normal: "Next")

Lebih Detail

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

Menentukan Efek Spesifik

Nivo mempunyai beberapa imbas di dalamnya yang secara normal akan ditampilkan secara acak. Efek-efek tersebut diantaranya sanggup Anda lihat di dalam instruksi sumber jquery.nivo.slider.js pada bab 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, bila Anda menginginkan imbas sliceUpRight dan sliceDownRight saja, caranya cukup dengan menuliskannya menyerupai ini:

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

Lihat Demo

Memodifikasi Jumlah Slice

Secara normal, jumlah slice ialah 15 dan box sebanyak 8 × 4. Namun kita sanggup memodifikasi jumlahnya. Yang penting pastikan saja Anda memakai angka-angka yang sempurna sesuai dengan pembagian lebar dan tinggi gambar semoga jadinya tidak berantakan. Misalnya, bila ukuran gambar yang dipakai untuk membuat slider ialah 200 × 100, buatlah jumlah slice sebanyak 10 atau 20 dan jangan membuat jumlah slice sebanyak 13, 17, 70, … alasannya ini akan membuat slider menjadi tersentak-sentak. Selain itu jangan terlalu banyak membuat 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 sanggup diubah dengan mudah:

$('#nivoSlider').nivoSlider({     animSpeed: 1000, // Menentukan kecepatan animasi     pauseTime: 2000  // Menentukan usang 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 sanggup dilakukan dengan cara menuliskan nilai false pada semua opsi yang berafiliasi dengan navigasi jalan pintas. Jika perlu, nonaktifkan juga fitur navigasi dengan papan ketik sehingga pengunjung tidak akan sanggup melaksanakan apapun kecuali menatap slider hingga pertunjukan berakhir. Ini bila 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 semoga 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' });
ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider
Navigasi Next & Prev

Lihat Demo

Nivo Slider dengan Thumbnail

Nivo Slider mempunyai beberapa hal yang akan membuat semua pengaturan menjadi jauh lebih mudah 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 ialah 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=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/1_thumb.jpg">     <img src="img/2.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/2_thumb.jpg">     <img src="img/3.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/3_thumb.jpg">     <img src="img/4.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/4_thumb.jpg"> </div>

Setelah atribut rel ditambah, maka thumbnail akan secara otomatis terbentuk di dalam kontrol navigasi. Namun ketika ini thumbnail masih tidak sanggup terlihat alasannya pengaturan normal dalam CSS dan dalam plugin masih belum mengizinkan untuk menampilkan gambar. Anda harus memodifikasi instruksi 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 bab bawah Anda akan melihat beberapa fungsi kosong menyerupai berikut:

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

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

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

Katakanlah kita akan membuat fungsi-fungsi komplemen yang akan dijalankan secara otomatis menurut pembagian waktu menyerupai pada tabel di atas. Ini cuma pola saja. Dalam kenyataannya, fungsi sanggup bermacam-macam. Di sini Saya akan memakai 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 gampang 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 membuat tema sendiri. Semoga sukses!

Lihat Demo


Sumber https://www.dte.web.id/

Konfigurasi Jquery Nivo Slider

ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider

Nivo ialah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya ketika pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang sanggup Anda gunakan di dalamnya. Dimulai dari memilih imbas spesifik, kontrol navigasi hingga kepada fungsi-fungsi tambahan. Namun pada intinya, Nivo ialah slider yang sanggup 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 ialah 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=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/2.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/3.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">       <img src="img/4.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider">     </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}
ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider
Detail Nivo Slider

Untuk menjalankan slider, terapkan method .nivoSlider() secara pribadi 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 memilih imbas transisi spesifik (normal: "random")
slices Digunakan untuk memilih jumlah potongan (jumlah potongan gambar vertikal) (normal: 15)
boxCols Digunakan untuk memilih jumlah kolom pada imbas berupa blok-blok potongan gambar (normal: 8)
boxRows Digunakan untuk memilih jumlah baris pada imbas berupa blok-blok potongan gambar (normal: 4)
animSpeed Digunakan untuk memilih kecepatan animasi (normal: 500)
pauseTime Digunakan untuk memilih seberapa usang slide akan berhenti sebelum memulai berganti menuju slide berikutnya (normal: 3000)
startSlide Digunakan untuk memilih urutan slide yang akan terlihat lebih dulu ketika 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 bermetamorfosis 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 memakai 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, imbas perpindahan slide akan dilakukan secara manual, yaitu dengan cara mengeklik navigasi Next & Prev atau 1, 2, 3, … atau memakai tombol panah pada papan ketik (normal: false)
captionOpacity Digunakan untuk memilih tingkat transparasi deskripsi slide (image caption). Sebenarnya ini tidak terlalu penting dan hanya dipakai untuk menangani validasi dan duduk perkara cross-browser untuk imbas CSS transparasi (normal: 0.8)
prevText Digunakan untuk memilih teks navigasi Previous (normal: "Prev")
nextText Digunakan untuk memilih teks navigasi Next (normal: "Next")

Lebih Detail

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

Menentukan Efek Spesifik

Nivo mempunyai beberapa imbas di dalamnya yang secara normal akan ditampilkan secara acak. Efek-efek tersebut diantaranya sanggup Anda lihat di dalam instruksi sumber jquery.nivo.slider.js pada bab 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, bila Anda menginginkan imbas sliceUpRight dan sliceDownRight saja, caranya cukup dengan menuliskannya menyerupai ini:

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

Lihat Demo

Memodifikasi Jumlah Slice

Secara normal, jumlah slice ialah 15 dan box sebanyak 8 × 4. Namun kita sanggup memodifikasi jumlahnya. Yang penting pastikan saja Anda memakai angka-angka yang sempurna sesuai dengan pembagian lebar dan tinggi gambar semoga jadinya tidak berantakan. Misalnya, bila ukuran gambar yang dipakai untuk membuat slider ialah 200 × 100, buatlah jumlah slice sebanyak 10 atau 20 dan jangan membuat jumlah slice sebanyak 13, 17, 70, … alasannya ini akan membuat slider menjadi tersentak-sentak. Selain itu jangan terlalu banyak membuat 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 sanggup diubah dengan mudah:

$('#nivoSlider').nivoSlider({     animSpeed: 1000, // Menentukan kecepatan animasi     pauseTime: 2000  // Menentukan usang 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 sanggup dilakukan dengan cara menuliskan nilai false pada semua opsi yang berafiliasi dengan navigasi jalan pintas. Jika perlu, nonaktifkan juga fitur navigasi dengan papan ketik sehingga pengunjung tidak akan sanggup melaksanakan apapun kecuali menatap slider hingga pertunjukan berakhir. Ini bila 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 semoga 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' });
ialah jQuery slider yang paling fleksibel dalam hal konfigurasi Konfigurasi jQuery Nivo Slider
Navigasi Next & Prev

Lihat Demo

Nivo Slider dengan Thumbnail

Nivo Slider mempunyai beberapa hal yang akan membuat semua pengaturan menjadi jauh lebih mudah 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 ialah 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=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/1_thumb.jpg">     <img src="img/2.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/2_thumb.jpg">     <img src="img/3.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/3_thumb.jpg">     <img src="img/4.jpg" alt=" ialah jQuery slider yang paling fleksibel dalam hal konfigurasi  Konfigurasi jQuery Nivo Slider" title="Konfigurasi jQuery Nivo Slider" rel="img/4_thumb.jpg"> </div>

Setelah atribut rel ditambah, maka thumbnail akan secara otomatis terbentuk di dalam kontrol navigasi. Namun ketika ini thumbnail masih tidak sanggup terlihat alasannya pengaturan normal dalam CSS dan dalam plugin masih belum mengizinkan untuk menampilkan gambar. Anda harus memodifikasi instruksi 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 bab bawah Anda akan melihat beberapa fungsi kosong menyerupai berikut:

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

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

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

Katakanlah kita akan membuat fungsi-fungsi komplemen yang akan dijalankan secara otomatis menurut pembagian waktu menyerupai pada tabel di atas. Ini cuma pola saja. Dalam kenyataannya, fungsi sanggup bermacam-macam. Di sini Saya akan memakai 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 gampang 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 membuat tema sendiri. Semoga sukses!

Lihat Demo


Sumber https://www.dte.web.id/
Gambar jQuery Lanjutan
Langganan: Posting Komentar (Atom)