It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website, magazine or online news has one on their site, and even some e-commerce sites have one.
Today you can use sliders with Joomla, WordPress or Drupal. But the problem I had when I used one of the ready-made components you can download is that it is not customizable. Yes, you can change the look and feel, but you can not change the code. It is very complicated even for experienced developers.
Finally I decided to make one my own, which I believe is easier to manage and doesn't have 1000 options I do not need. The best part, though, is that I can upgrade it as I want when I need, just by adding a little more code.
Back-end section
My component is made of two parts. The first one is the back-end section which is the side the visitors do not see -- the administration part of the slider. We will need a simple database table which will contain the data. I will use an Access DB. I created a table with these fields:
id Autonumber - this is just for indexing and it will be the primary-key
slideimg Text - this will contain the path to the picture
slidetitle Text - this will contain the title of the slide
slideurl Text - this will contain the URL destination when you click the slide
1:
2:
3:
4:
Select allOpen in new window
I saved this table as "slider" and the file as "cms.mdb".
Then I created the administration interface. I used WhizBase for querying/editing the DB. Everything between #* and *# are comments so you can follow the code I used.
[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=20 #* show 20 records in every page in the navigation system *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slider admin</title>
</head>
<body>
<h1>Add slides<h1>
<form action="addslider.wbsp" method="post" enctype="multipart/form-data">
#* for adding new slides we will submit our data to addslider.wbsp which we will create later. Do not forget to put enctype="multipart/form-data" because we are uploading files to the server. *#
Slide title: <input type="text" name="wbf_slidetitle" /><br />
Slide URL: <input type="text" name="wbf_slideurl" /><br />
Slide IMG: <input type="file" name="wbf_slideimg" /><br />
<input type="submit" value="Add slider" />
</form>
#* You will notice that I am using wbf_ in the input names. It is a prefix I add to make WhizBase process the data I am sending and add it in the DB automatically. *#
<hr />
#* Here we list the result of the query we done in the start of this file *#
<h1>All slides<h1>
<table width="100%" border="1" cellpadding="5" cellspacing="0" align="left">
<tr><td align="left" valign="top"><b>Title</b></td><td align="left" valign="top"><b>Thumb</b></td><td align="left" valign="top"><b>URL</b></td><td align="left" valign="top"><b>Delete</b></td></tr>
<!--WB_BeginDetail--> #* this will go through every record and added in our table *#
<tr>
<td align="left" valign="top">$wbf[slidetitle]</td> #* $wbf is a function in WhizBase to show a field for a record *#
<td align="left" valign="top"><img src="$wbf[slideimg]" width="150" /></td>
<td align="left" valign="top">$wbf[slideurl]</td>
<td align="left" valign="top"><a href="delete.wbsp?wbf_id=$wbf[id]">$wbf[id]</a></td> #* to pass variables by GET method I am using the wbf_ prefix *#
</tr>
<!--WB_EndDetail--> #* this will end the records loop *#
</table>
<center>$wbnavigator[]</center> #* I am adding the navigation links, so we can navigate through big lists *#
</body>
</html>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
Select allOpen in new window
This page will let me add or delete slides; save it as "slider.wbsp". Now let us see "addslider.wbsp":
[FormFields]
WB_BaseName=cms.mdb
WB_AllowMultipart=T #* Allow multipart data is set to True. Without this we can not upload files, because upload is False by default for security reasons *#
WB_Command=A #* Add our parameters in the DB - we get them from the form with wbf_ prefixes *#
WB_Redirect=slider.wbsp #* redirect us to the admin page again *#
WB_RcdSet=slider
[Upload] #* This section is for upload information *#
WB_Disallow=![jpg,gif,png,bmp] #* Disallow everything but pictures *#
WB_UploadDir=/images/ #* Upload pictures to images folder *#
WB_BaseURL=/images/ #* Base path will be images folder *#
WB_Overwrite=F #* Do not overwrite images, new images with same name will be given a new unique name automatically *#
WB_MaxFSize=500000 #* Maximum size in bytes *#
WB_UploadLog=upload.log #* write a log file upload.log *#
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
Select allOpen in new window
This is a pure WhizBase file which will upload the picture and add the data to the DB. It will check the size of the file, the file type, set the upload folder, filter all data from SQL injections and keep the files without being overwritten.
Now let us make the "delete.wbsp" file which deletes our slides.
[FormFields]
WB_BaseName=cms.mdb
WB_RcdSet=slider
WB_Command=D #* D is for delete, we have got the id in the link with prefix wbf_ *#
WB_Redirect=slider.wbsp
<!--WB_BeginTemplate-->
1:
2:
3:
4:
5:
6:
Select allOpen in new window
Now we have the administration ready. You can make a password protected folder and put the administration files in it, but do not forget to change the paths.
Front-end section
The second section is the front-end section which is the side the visitors see; it is the visual part of the slider. We will need some JavaScript and HTML code, with WhizBase for querying the DB.
[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=$all$ #* show all records in sliders we do not navigate *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<html>
<head>
<title>Frontpage slideshow</title>
<script type="text/javascript">
var slides= new Array($wbp[RC]); #* $wbp[RC] will give the number of records count. We need the number of slides for JS array, we will fill the array with data in the looping section *#
</script>
</head>
<body onload="initslider();"> #* to start the slider we make a JavaScript call on-load of body *#
<div id="slider"></div> #* this will contain the slideshow *#
<!--WB_BeginDetail--> #* I will list all the slides here, but I will not display them. This is good for SEO *#
<script type="text/javascript">slides[$wbp[RN]] = 'slide$wbf[id]';</script> #* $wbp[RN] will give us the record number. We need the slide div id which will be slide+id *#
<div id="slide$wbf[id]" style="display:nome;"> #* Use display:none; to hide the slide *#
<a href="$wbf[slideurl]"><img src="$wbf[slideimg]" alt="$wbf[slidetitle]" border="0" /></a> #* we make the content of every slide *#
</div>
<!--WB_EndDetail-->
#* We need initslider(); function in JavaScript *#
<script type="text/javascript">
var start=0;
function initslider(){
setTimeout("initslider()",500);
document.getElementById('slider').innerHTML = document.getElementById(slides[start]).innerHTML;
if(start == $wbp[RC]-1)
start = 0;
else
start++;
}
#* This function will take the content of the slide from a hidden div and set it in the slideshow div. It will launch itself every 500 miliseconds again and set the next slide in the slideshow div. We check also the slide number, and if it is equal to the number of all slides minus one, it will reset the slide number. *#
</script>
</body>
</html>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
Select allOpen in new window
With this file, named "default.wbsp", we have a custom made slideshow manager. You can now add more elements in the slide show, like thumbnail picture, description, slide types and timers.
For more information email me at: NurAzije [at] Gmail [dot] com.
NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.
