Nota:
Tedapat tutorial yang sama tetapi untuk WordPress plugin di sini: Tutorial: Bina Slideshow Plugin Untuk WordPress 3.0.x.
Kebanyakan laman web sekarang mempunyai image slideshow pada laman utama. Ianya sudah boleh dikatakan satu benda yang wajib ada, bergantung kepada jenis laman web itu sendiri. Tapi jika kita perhatikan, memang kebanyakan pemilik laman web suka dengan slideshow di laman web mereka. Lagi banyak animation, lagi mereka suka. Dan kalau boleh semua diorang nak animate :P
Jika kita search Joomla! Extensions Directory, terdapat banyak module slideshow yang ada di sana, Commercial atau Non-commercial. Tapi, pernahkah anda terfikir untuk cuba menghasilkannya sendiri? Kali ini saya ingin menunjukkan cara cara menghasilkan module slideshow untuk Joomla! 1.5.x yang menggunakan jQuery dan juga Coin Slider. Slideshow ini akan menggunakan semua imej yang terdapat di dalam folder yang kita akan tetapkan nanti.
Keperluan
Code Editor (saya guna PSPad, percuma)
jQuery 1.4.x (terkini)
Coin Slider for jQuery
Langkah 1
Sekarang, pada mana mana bahagian di dalam komputer anda, cipta satu folder dan namakan mod_myslideshow. Kemudian, 
create 3 file seperti di bawah ini, dan biarkan ianya kosong terlebih dahulu.
- mod_myslideshow.php
- mod_myslideshow.xml
- helper.php
Di dalam folder myslideshow, create 3 folder seperti di bawah:
- css
- js
- tmpl
Seterusnya, create satu file baru, default.php di dalam folder tmpl. Biarkan ia kosong. Lihat gambar di sebelah sebagai rujukan.
Download file jQuery dan masukkan di dalam folder js. Pada fail coin-slider.zip yang anda download tadi, extract dengan apa apa software zip. Di dalamnya terdapat 3 files. Copy file berikut sahaja
- coin-slider-styles.css ke dalam folder css
- coin-slider.min.js ke dalam folder js
Langkah 2
Kita mulakan dengan file metadata untuk module ini terlebih dahulu. Buka file mod_myslideshow.xml dan ikut turutan langkah di bawah ini.
<?xml version="1.0" encoding="utf-8"?> <install type="module" version="1.5.0" method="upgrade">
Kod bagi module Joomla! 1.5. Perlu ada.
<name>MySlideshow</name> <author>Syahril Zulkefli</author> <creationDate>Aug 2010</creationDate> <copyright>Copyright (C) 2005 - 2010 Syahril Zulkefli. All rights reserved.</copyright> <license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license> <authorEmail>syah@syahzul.com</authorEmail> <authorUrl>www.syahzul.com</authorUrl> <version>1.0.0</version> <description>Module MySlideshow, original jQuery plugin by http://workshop.rs, ported to Joomla! module by Syahril Zulkefli a.k.a. syahzul.</description>
Kod ini pula lebih kepada maklumat developer. Boleh tukar dengan maklumat anda sendiri, jangan malu malu ye :P
<files> <filename module="mod_myslideshow">mod_myslideshow.php</filename> <filename>helper.php</filename> <folder>css</folder> <folder>js</folder> <folder>tmpl</folder> </files>
Bahagian ini pula menerangkan apa files atau folders yang terdapat di dalam module kita. Tak perlu tukar apa apa di sini.
<params> <param name="path" type="text" size="60" default="images/stories/myslideshow" label="Image Path" description="Specify your image path here. Must be inside your Joomla! folder." /> <param name="@spacer" type="spacer" default="" label="" description="" /> <param name="slideEfx" type="list" default="random" label="Slider effect" description="Choose your preferred slide effect"> <option value="random">Random</option> <option value="swirl">Swirl</option> <option value="rain">Rain</option> <option value="straight">Straight</option> </param> <param name="slideWidth" type="text" default="600" label="Slider width" description="Enter your slider width (in pixels) here. Numbers only please." /> <param name="slideHeight" type="text" default="300" label="Slider height" description="Enter your slider height (in pixels) here. Numbers only please." /> <param name="slideSpw" type="text" default="7" label="Square per width" description="Be careful with Square per width because large numbers can cause transitions problems." /> <param name="slideSph" type="text" default="5" label="Square per height" description="Be careful with Square per height because large numbers can cause transitions problems." /> <param name="slideDelay" type="text" default="3000" label="Delay between images" description="Enter delay between images, in miliseconds." /> <param name="slideSDelay" type="text" default="30" label="Delay between squares" description="Enter delay between squares, in miliseconds." /> <param name="slideNavigation" type="radio" default="1" label="Show navigation?" description="If you choose Yes, slide navigation, including Next and Prev button, will be shown."> <option value="1">Yes</option> <option value="0">No</option> </param> <param name="slideOpacity" type="list" default="0.7" label="Navigation opacity" description="Enter opacity value for navigation."> <option value="0.1">0.1</option> <option value="0.2">0.2</option> <option value="0.3">0.3</option> <option value="0.4">0.4</option> <option value="0.5">0.5</option> <option value="0.6">0.6</option> <option value="0.7">0.7</option> <option value="0.8">0.8</option> <option value="0.9">0.9</option> <option value="1.0">1.0</option> </param> <param name="slidePauseHover" type="radio" default="1" label="Pause on mouse over?" description="If you choose Yes, slideshow will be stop when user hovering the mouse over the image."> <option value="1">Yes</option> <option value="0">No</option> </param> <param name="@spacer" type="spacer" default="" label="" description="" /> <param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="PARAMMODULECLASSSUFFIX" /> </params> <params group="advanced"> <param name="cache" type="list" default="0" label="Caching" description="Select whether to cache the content of this module"> <option value="1">Use global</option> <option value="0">No caching</option> </param> <param name="cache_time" type="text" default="900" label="Cache Time" description="The time before the module is recached" /> </params>
Ini pula bahagian parameter untuk module kita. Di sini, jika anda perhatikan (atau baca kod itu) terdapat beberapa parameter yang kita perlukan, contohnya width, height, slideshow effects, delay dan lain lain. Sama juga, copy sahaja kod ini tanpa perlu ubah apa apa.
</install>
Penutup untuk file ini. Dah siap, save file tersebut dan bersedia untuk kod PHP pula.
Langkah 3
Buka file mod_myslideshow.php dengan code editor, dan tambah kod kod di bawah ini.
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
require_once( dirname( __FILE__ ) . DS . 'helper.php' );
$list = modMySlideshowHelper::getList( $params );
// check if any results returned
$items = count( $list );
if (!$items) {
return;
}
require(JModuleHelper::getLayoutPath('mod_myslideshow'));
Langkah 4
Buka file helper.php dengan code editor, dan tambah kod di bawah ini.
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
class modMySlideshowHelper
{
function getList(&$params)
{
jimport('joomla.filesystem.folder');
// load assets
modMySlideshowHelper::addAssets( $params );
// get path from parameter
$path = $params->get('path');
// split the folder into array
$_path = explode('/', $path);
// implode it into absolute path
$abspath = implode( DS, $_path);
// add root into our path
$abspath = JPATH_ROOT . DS . $abspath . DS;
// now, get all the image files inside these folder
$files = JFolder::files($abspath, '\.jpg$|\.png$|\.gif$');
// time to re-construct the url to the images
for ( $x = 0; $x < count( $files ); $x++ ) {
$files[$x] = JURI::root() . $path . '/' . $files[$x];
}
return $files;
}
function addAssets(&$params)
{
$document =& JFactory::getDocument();
// add CSS file
$document->addStylesheet( JURI::root() . 'modules/mod_myslideshow/css/coin-slider-styles.css' );
$js = '<script type="text/javascript" src="' . JURI::root() . 'modules/mod_myslideshow/js/jquery-1.4.2.min.js"></script>';
$js .= '<script type="text/javascript" src="' . JURI::root() . 'modules/mod_myslideshow/js/coin-slider.min.js"></script>';
$js .= '<script type="text/javascript">' . "\n";
$js .= 'jQuery.noConflict();' . "\n";
$js .= 'jQuery(document).ready( function() {' . "\n";
$js .= ' jQuery("#mod_myslideshow").coinslider({' . "\n";
$js .= ' width: ' . $params->get('slideWidth') . ", ";
$js .= ' height: ' . $params->get('slideHeight') . ", ";
$js .= ' spw: ' . $params->get('slideSpw') . ", ";
$js .= ' sph: ' . $params->get('slideSph') . ", ";
$js .= ' delay: ' . $params->get('slideDelay') . ", ";
$js .= ' sDelay: ' . $params->get('slideSDelay') . ", ";
$js .= ' opacity: ' . $params->get('slideOpacity') . ", ";
$js .= ' effect: \'' . $params->get('slideEfx') . '\', '; // random, swirl, rain, straight
$js .= ' navigation: ' . ($params->get('slideNavigation') ? 'true' : 'false') . ', ';
$js .= ' links: false, ';
$js .= ' hoverPause: ' . ($params->get('slidePauseHover') ? 'true' : 'false') . "\n";
$js .= ' });' . "\n";
$js .= '});' . "\n";
$js .= '</script>';
$document->addCustomTag( $js );
}
}
Langkah 5
Buka file tmpl/default.php dan tambah kod di bawah ini.
<div id="mod_myslideshow">
<?php for ( $x = 0; $x < $items; $x++ ) { ?>
<img src="<?php echo $list[$x]; ?>" />
<?php } ?>
</div>
Langkah 6
Sekarang, select semua files dan folders di dalam folder mod_myslideshow tadi, dan zipkannya.
Pastikan masa nak create zip file tu, pilih extension .zip, bukan .rar atau .7z. Dan gunakan file tersebut, contohnya mod_myslideshow.zip dan install pada mana mana Joomla!.
Langkah 7
Sekarang create satu folder baru di dalam folder images dan berikan nama myslideshow. Kemudian, save 4 gambar berikut di dalam folder tersebut.
* Nota: Klik pada gambar untuk view fullsize.
Langkah 8
Lepas dah install, boleh configure module tadi untuk kesesuaian website kita.
Penerangan Parameters
- Image Path
Lokasi imej yang kita nak gunakan. Pastikan ianya berada di dalam folder Joomla!. - Slider effect
Ada 3 effects yang boleh kita gunakan; Swirl, Rain, Straight. Dan boleh combine semua, gunakan Random. - Slider width
Lebar slideshow anda. Pastikan lebar imej juga sama bagi mendapatkan hasil yang memuaskan hati anda. - Slider height
Tinggi slideshow anda. Pastikan tinggi imej juga sama bagi mendapatkan hasil yang memuaskan hati anda. - Square per width
Jumlah kotak berdasarkan lebar, sila tengok demo untuk fahamkan. - Square per height
Jumlah kotak berdasarkan tinggi, sila tengok demo untuk fahamkan.
- Delay between images
Had masa antara setiap satu image. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat. - Delay between squares
Had masa antara setiap satu kotak. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat. - Show navigation
Perlu tunjukkan button Next dan Prev? - Navigation opacity
Opacity untuk button Next dan Prev. - Pause on mouse over
Slideshow berhenti bila user letak mouse atas slideshow tu.
Demo
http://www.syahzul.com/demo/joomla/
Download
Kalau rasa buat tak menjadi tu, sila download dari sini, free. Boleh guna pada mana mana website jika sudi.
Penutup
Walaupun sebenarnya ini bukan macam tutorial sangat, tapi kalau rajin kaji kod kod di atas tadi untuk belajar konsep MVC Joomla!. Mungkin nanti saya akan extend lagi, tambah title dengan description ke, tambah component untuknya ke, dan mungkin juga jadikan utk content, bukan setakat imej. Tapi buat masa ini, setakat ini sahaja. Feedback amatlah dihargai.
Nota lagi:
Gambar tu untuk tujuan pembelajaran sahaja, sila jangan gunakan untuk tujuan lain.
Pingback: Tutorial: Bina Slideshow Plugin Untuk Wordpress 3.0.x « syahzul