Plugin ini intinya merupakan perpaduan antara Basic jQuery Image Rotator dengan JSON Blogger yang kemudian Saya jadikan sebagai semacam slideshow dengan konten yang akan diperbaharui secara otomatis menurut posting yang sudah terbit. Saya tetapkan untuk menciptakan ini sebab 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 ialah navigasi, pengaruh animasi kontainer dan sumbangan fungsi callback yang sanggup dijalankan pada sesi-sesi tertentu.
Implementasi Dasar
Berikut ini ialah pola implementasi paling fundamental yang sanggup Anda lakukan untuk mengaktifkan plugin:
<link rel="stylesheet" href="//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 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script> <script> makeSlider({ url: "//nama_blog.blogspot.com" // URL blog Anda }); </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 sanggup menampilkan sebuah slideshow sederhana menyerupai yang terlihat pada halaman demo di atas.
Daftar Opsi Konfigurasi Dasar
Konfigurasi dasar Saya batasi pada opsi-opsi yang berafiliasi dengan pengaturan posting:
{ url: "//www.dte.web.id", // Your blog URL numPost: 5, // Number of posts to display newTabLink: false, // `true` to automatically open link in new window tab labelName: null, // Show posts in specific label. Specify name of the post label, or `null` to show all posts showDetail: true, // `false` to hide the blog post title & description summaryLength: 60, // Length of post summary titleLength: "auto", // Length of the post title. "auto" by default, or specify number to crop the post title characters and truncate it with `...` showThumb: true, // `false` to hide the post thumbnails thumbWidth: 250, // Width of post thumbnail in pixels squareThumb: true, // Thumbnail mode: Square mode or use the scaled thumbnail with original width and height ratio noThumb: "images/grey.png", // Fallback thumbnail for no picture posts showNav: true, // `true` to show both next/prev navigation and navigation number, "next/prev" to show next/prev navigation only, "number" to show navigation number only, `false` to hide the navigation navText: { prev: "<", // Label of the previous navigation next: ">" // Label of the next navigation }, containerId: "slider-rotator" // HTML element ID that is used to display the slideshow/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 menciptakan tautan-tautan di dalam widget ini terbuka di jendela/tab gres ketika 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 mempunyai label Foto - Contoh |
| showDetail | Ubah nilainya menjadi false untuk menyembunyikan judul dan ringkasan posting. Berguna untuk menciptakan slideshow foto/gambar tanpa goresan pena - 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 bila 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 menciptakan slideshow teks - Contoh |
| thumbWidth | Digunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow |
| squareThumb | Opsi untuk menentukan 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 dipakai sebagai cadangan bila posting yang tampil tidak mempunyai 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 sanksi plugin. |
Pengaturan Animasi
Pengaturan animasi Saya batasi pada opsi-opsi yang berafiliasi dengan animasi plugin:
{ interval: 6000, // Slideshow interval speed: 1000, // Slideshow animation speed hoverPause: true, // `false` to make the slideshow/rotator keep running on mouse-over crossFade: false, // `true` if you want to make the slide change effect occurs simultaneously between disappearance and appearance autoHeight: false, // Animate the rotator to adjust the height of the displayed item autoSlide: true // `false` to run the slideshow manually (with navigation) }| 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 ketika pointer mouse berada di atasnya |
| crossFade | Digunakan untuk menentukan apakah pengaruh penghilangan dan pemunculan slide dilakukan secara bergantian atau bersamaan dalam waktu yang sama tanpa ada jeda |
| autoHeight | Jika bernilai true, maka tinggi slideshow akan mengikuti keadaan menurut tinggi item slide yang tampil dengan pengaruh animasi - Contoh |
| autoSlide | Ubah nilainya menjadi false untuk menciptakan slideshow berjalan secara manual melalui agresi klik navigasi |
Konfigurasi Lanjutan
Bagian ini Saya khususkan untuk menjelaskan fungsi-fungsi callback dan implementasi lanjutan, khususnya dalam hal modifikasi:
{ onInit: function() {}, // Callback function that will be executed when slideshow is starting onHide: function(index) {}, // Callback function that will be executed when slideshow is start hiding the slide item onShow: function(index) {} // Callback function that will be executed after the slideshow showing the slide item }onInit
Fungsi ini akan dijalankan pada ketika pertama kali slideshow terbentuk. Saat slideshow tampil, maka fungsi ini akan pribadi dieksekusi. Contoh penerapan:
makeSlider({ url: "//nama_blog.blogspot.com", onInit: function() { alert('Slideshow ready!'); } });Kode di atas akan menampilkan pesan “Slideshow ready!” segera sehabis 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: "//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: "//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: "//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 sanggup semakin memperkuat status plugin ini sebagai “slideshow”:
CSS
<link rel="stylesheet" href="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/> <style> /* Custom 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; /* Same with `.slider-rotator` height */ padding:0 0; } .slider-rotator h4 {margin-top:0} .slider-rotator p {margin:2px 0 0} /* Slider details as caption */ .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: "//nama_blog.blogspot.com", // Your blog URL thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width) });Memanfaatkan Fungsi Callback untuk Menganimasikan Caption
Dengan memanfaatkan parameter index pada onHide dan onShow, Anda sanggup menunjukkan pengaruh animasi pada caption slide yang aktif setiap kali slide berganti:
makeSlider({ url: "//nama_blog.blogspot.com", // Your blog URL thumbWidth: 600, // Thumbnail width in pixels (same with slideshow width) containerId: "slider-rotator", // Hide all captions on initiation... onInit: function() { $('#' + this.containerId).find('.detail-wrapper').hide(); }, // Hide the caption with `.slideUp()` effect when the slide item hides onHide: function() { $('#' + this.containerId).find('.detail-wrapper').slideUp(); }, // Show the caption with `.slideDown()` effect when the slide item appears onShow: function(index) { $('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown(); } });Menampilkan Beberapa Slideshow Sekaligus
Karena sanksi plugin ini dilakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa slideshow sekaligus dalam satu halaman. Pertama-tama buatlah beberapa elemen HTML yang diharapkan 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 menurut ID kontainer:
makeSlider({ url: "//nama_blog-1.blogspot.com", containerId: "container-1" }); makeSlider({ url: "//nama_blog-2.blogspot.com", containerId: "container-2" }); makeSlider({ url: "//nama_blog-3.blogspot.com", containerId: "container-3" });Mengatur Plugin dan Melihat Demo Secara Langsung
Saya sudah menyertakan halaman konfigurasi plugin yang sanggup Anda gunakan untuk melaksanakan pengaturan dan melihat karenanya secara pribadi 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)