Plugin ini pada dasarnya merupakan perpaduan antara
Basic JQuery Image Rotator dengan
JSON Blogger yang kemudian Saya jadikan sebagai semacam
slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena ada beberapa orang yang menanyakan melalui email mengenai bagaimana cara memadukan plugin
Image Rotator dengan
JSON Blogger.
Plugin
JQuery Image Rotator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang Saya tambahkan diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi
callback yang dapat dijalankan pada sesi-sesi tertentu.
Implementasi Dasar
Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin:
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-9<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://nama_blog.blogspot.com"
});
</script>
Susun file CSS dan plugin
Blogger Feed Rotator sesuai dengan urutan yang Saya perlihatkan di atas. Tambahkan juga elemen HTML yang berfungsi untuk menampilkan
slideshow sebelum plugin. Setelah itu aktifkan fungsi
makeSlider()
dengan parameter berupa objek tunggal
url
yang diisi dengan URL blog Anda. Salin dan tempelkan di dalam formulir elemen halaman
HTML/JavaScript. Dengan ini maka Anda sudah bisa menampilkan sebuah
slideshow sederhana seperti yang terlihat pada halaman demo di atas.
Daftar Opsi Konfigurasi Dasar
Konfigurasi dasar Saya batasi pada opsi-opsi yang berhubungan dengan pengaturan posting:
1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-19{
url: "http://www.dte.web.id",
numPost: 5,
newTabLink: false,
labelName: null,
showDetail: true,
summaryLength: 60,
titleLength: "auto",
showThumb: true,
thumbWidth: 250,
squareThumb: true,
noThumb: "images/grey.png",
showNav: true,
navText: {
prev: "<",
next: ">"
},
containerId: "slider-rotator"
}
Opsi | Keterangan |
---|
url | Isi dengan URL halaman muka blog Anda |
numPost | Digunakan untuk menentukan jumlah posting yang akan ditampilkan |
newTabLink | Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini terbuka di jendela/tab baru saat diklik |
labelName | Digunakan untuk menampilkan daftar posting dengan label/kategori tertentu. Nilai null berarti menampilkan semua posting terbaru. Ganti nilainya menjadi nama label untuk menampilkan posting dengan label tertentu. Misalnya labelName:"Foto" untuk menampilkan semua posting yang memiliki label Foto - Contoh |
showDetail | Ubah nilainya menjadi false untuk menyembunyikan judul dan ringkasan posting. Berguna untuk membuat slideshow foto/gambar tanpa tulisan - Contoh |
summaryLength | Digunakan untuk membatasi panjang ringkasan posting. Akhir pemotongan ringkasan posting akan digantikan dengan simbol “…” |
titleLength | Digunakan untuk membatasi panjang judul posting. Secara normal bernilai "auto" . Ubah nilainya dengan angka tertentu untuk memotong panjang judul jika Anda merasa judul posting yang tampil terlalu panjang. Akhir pemotongan judul posting akan digantikan dengan simbol “…” |
showThumb | Ubah nilainya menjadi false untuk menyembunyikan gambar posting. Berguna untuk membuat slideshow teks - Contoh |
thumbWidth | Digunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow |
squareThumb | Opsi untuk memilih mode thumbnail. true untuk menampilkan gambar dengan resolusi /sN-c , false untuk menampilkan gambar dengan resolusi /sN |
noThumb | Isi dengan URL gambar. Gambar ini akan digunakan sebagai cadangan jika posting yang tampil tidak memiliki gambar |
showNav | Opsi untuk menampilkan atau menyembunyikan navigasi slideshow. Ubah nilainya menjadi false untuk menyembunyikan navigasi. "number" untuk menampilkan navigasi angka saja. "next/prev" untuk menampilkan navigasi next/prev saja. true untuk menampilkan keduanya |
navText | Opsi untuk menentukan label navigasi Next dan Previous |
containerId | Digunakan untuk menentukan di mana slideshow akan ditampilkan. Isi dengan ID elemen HTML. Dan jangan lupa untuk menyertakan elemen HTML tersebut sebelum eksekusi plugin. |
Pengaturan Animasi
Pengaturan animasi Saya batasi pada opsi-opsi yang berhubungan dengan animasi plugin:
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-8{
interval: 6000,
speed: 1000,
hoverPause: true,
crossFade: false,
autoHeight: false,
autoSlide: true
}
Opsi | Keterangan |
---|
interval | Digunakan untuk menentukan rentang waktu perpindahan setiap item slide dalam satuan milidetik |
speed | Digunakan untuk menentukan kecepatan animasi dalam satuan milidetik |
hoverPause | Jika bernilai true maka slideshow akan berhenti bergerak saat pointer mouse berada di atasnya |
crossFade | Digunakan untuk menentukan apakah efek penghilangan dan pemunculan slide dilakukan secara bergantian atau bersamaan dalam waktu yang sama tanpa ada jeda |
autoHeight | Jika bernilai true , maka tinggi slideshow akan menyesuaikan diri berdasarkan tinggi item slide yang tampil dengan efek animasi - Contoh |
autoSlide | Ubah nilainya menjadi false untuk membuat slideshow berjalan secara manual melalui aksi klik navigasi |
Konfigurasi Lanjutan
Bagian ini Saya khususkan untuk menjelaskan fungsi-fungsi
callback dan implementasi lanjutan, khususnya dalam hal modifikasi:
1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-5{
onInit: function() {},
onHide: function(index) {},
onShow: function(index) {}
}
onInit
Fungsi ini akan dijalankan pada saat pertama kali
slideshow terbentuk. Saat
slideshow tampil, maka fungsi ini akan langsung dieksekusi. Contoh penerapan:
makeSlider({
url: "http://nama_blog.blogspot.com",
onInit: function() {
alert('Slideshow ready!');
}
});
Kode di atas akan menampilkan pesan
“Slideshow ready!” segera setelah
slideshow tampil.
onHide
Fungsi ini akan dijalankan setiap kali item slide mulai menghilang. Saat item slide menghilang, maka fungsi ini akan tereksekusi. Contoh penerapan:
makeSlider({
url: "http://nama_blog.blogspot.com",
onHide: function() {
alert('Mengganti slide...');
}
});
Kode di atas akan menampilkan pesan
“Mengganti slide...” setiap kali slide mulai berganti.
onShow
Fungsi ini akan dijalankan setiap kali item slide tampil. Saat item slide tampil, maka fungsi ini akan tereksekusi. Contoh penerapan:
makeSlider({
url: "http://nama_blog.blogspot.com",
onShow: function(index) {
alert('Slide ke ' + index + ' berhasil tampil.');
}
});
Kode di atas akan menampilkan pesan
“Slide ke {nomor urut slide yang tampil} berhasil tampil.” setiap kali slide ditampilkan.
Parameter `index`
Parameter
index
hanya berlaku untuk
onHide
dan
onShow
. Parameter ini akan menampilkan indeks slide yang aktif:
makeSlider({
url: "http://nama_blog.blogspot.com",
onInit: function() {
console.log('Slideshow dimulai...');
},
onHide: function(index) {
console.log('Menyembunyikan slide ke ' + index);
},
onShow: function(index) {
console.log('Menampilkan slide ke ' + index);
}
});
Beberapa Contoh Modifikasi Dasar
Mengubah Tampilan
Dengan mengubah ukuran lebar pada gambar dan
slideshow, ukuran tinggi pada
slideshow dan mengubah tampilan deskripsi/detail posting sebagai
caption, maka Anda bisa semakin memperkuat status plugin ini sebagai
“slideshow”
:
CSS
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
width:600px;
height:240px;
padding:0 0;
background-color:white;
font:italic normal 12px/1.4 Georgia,Serif;
color:white;
border:1px solid black;
}
.slider-rotator .slider-item {
background-color:white;
height:240px;
padding:0 0;
}
.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
</style>
JavaScript
makeSlider({
url: "http://nama_blog.blogspot.com",
thumbWidth: 600
});
Memanfaatkan Fungsi Callback untuk Menganimasikan Caption
Dengan memanfaatkan parameter
index
pada
onHide
dan
onShow
, Anda bisa memberikan efek animasi pada
caption slide yang aktif setiap kali slide berganti:
makeSlider({
url: "http://nama_blog.blogspot.com",
thumbWidth: 600,
containerId: "slider-rotator",
onInit: function() {
$('#' + this.containerId).find('.detail-wrapper').hide();
},
onHide: function() {
$('#' + this.containerId).find('.detail-wrapper').slideUp();
},
onShow: function(index) {
$('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
}
});
Menampilkan Beberapa Slideshow Sekaligus
Karena eksekusi plugin ini dilakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa
slideshow sekaligus dalam satu halaman. Pertama-tama buatlah beberapa elemen HTML yang dibutuhkan untuk memuat
slideshow:
<div id="container-1" class="slider-rotator loading"></div>
<div id="container-2" class="slider-rotator loading"></div>
<div id="container-3" class="slider-rotator loading"></div>
Kemudian jalankan fungsi
makeSlider()
sebanyak jumlah kontainer yang dibuat. Tentukan juga konfigurasi
containerId
yang berbeda-beda berdasarkan ID kontainer:
makeSlider({
url: "http://nama_blog-1.blogspot.com",
containerId: "container-1"
});
makeSlider({
url: "http://nama_blog-2.blogspot.com",
containerId: "container-2"
});
makeSlider({
url: "http://nama_blog-3.blogspot.com",
containerId: "container-3"
});
Mengatur Plugin dan Melihat Demo Secara Langsung
Saya sudah menyertakan halaman konfigurasi plugin yang bisa Anda gunakan untuk melakukan pengaturan dan melihat hasilnya secara langsung di sini:
Daftar Contoh
- Demo 1: Basic
- Demo 2: Show Posts under Category “Widget”
- Demo 3: About Thumbnails
- Demo 4: Thumbnail Only
- Demo 5: Text Only
- Demo 6: Multiple Feed Loading
- Demo 7: Casual Slideshow
- Demo 8: Example Callback Function to Animate the Slideshow Caption (1)
- Demo 9: Example Callback Function to Animate the Slideshow Caption (2)