This tutorial will help you make a database driven slide show that has a navigation bar with text links to each slide, a pause button and the slides also have a database driven link. I'll assume you know how to get the records in the database and how to read the php code because you will need to define the location of your images and get the code to connect to your database.
See a demo of this tutorial here
Download the source code (all crammed into 1 php file for your convenience). You will also need jquery, the cycle plugin and optionally the easing plugins for jquery.
First, we'll need to create a folder with some images. My folder is called slide_img and is a child folder of my php file.
We'll also need to create a table in the database:
CREATE TABLE `slide_items` (
`id` TINYINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`filename` VARCHAR( 200 ) NOT NULL ,
`title` VARCHAR( 50 ) NOT NULL ,
`link` VARCHAR( 500 ) NOT NULL ,UNIQUE (`filename`)
) ENGINE = MYISAM
You'll probably want to insert some records – these are based on the images I have in my demo – but the filename should correspond with the filename of the images in your slide_img folder. Typically you would sync this all up with an admin tool where you would have a form for the title and link and an upload field for the image, but that's out of the scope of this article.
INSERT INTO `slide_items` (
`id` ,`filename` ,`title` ,`link`
)
VALUES(NULL , '1.jpg', 'glacier NP', 'https://www.kevindubois.com'),
(NULL , '2.jpg', 'Blodgett Canyon', 'http://www.duboistechnologies.com'),
(NULL , '3.jpg', 'Tree at Ridge', 'http://www.google.com'),
(NULL , '4.jpg', 'Sheep Mtn Bowl', 'https://www.kevindubois.com');
Now that we have the database and image folder set up, we can dive into the code. The slide class contains all the database interactions, so let's start with that. The class has 2 main functions: get_slides() retrieves the records from the database and show_slides() loops over the records and returns a variable that contains the html for all the images and their corresponding links. For more detail, read the comments in the code:
class Slide{
// where are the images stored?
var $imgfolder = "/demos/slide_img/";
var $dbconnection = false;
// =============================================
// Method : constructor
// Paramaters : none
// Return Value: none
// Purpose : instantiate the database connection
// Author : Kevin Dubois
// =============================================
public function __construct()
{
// connect to database – replace the xxx with your database connection settings
$this->dbconnection = mysql_connect('xxxx', 'xxxxx', 'xxxxx') or die("Database Connection Failure");
mysql_select_db("xxxx", $this->dbconnection) or die("Database not found");}
// =============================================
// Method : destruct
// Paramaters : none
// Return Value: none
// Purpose : close the database connection
// Author : Kevin Dubois
// =============================================
public function __destruct(){
// close db connection
mysql_close($this->dbconnection);
}// =============================================
// Method : get_slides()
// Paramaters : none
// Return Value: array slides: all database records
// Purpose : get all slides
// Author : Kevin Dubois
// =============================================
public function get_slides()
{
// get slides from db query
$query = " SELECT id, filename, title, link
FROM slide_items
ORDER BY id ASC";
// send query to db
$result = mysql_query($query);
// define $slides
$slides = array();
// loop over the records and populate the slides array
while($row = mysql_fetch_assoc($result)){
$slides[] = $row;
}return $slides;
}
public function show_slides(){
// get the slides from db
$files = $this->get_slides();
// define $file_links
$file_links = ";
// loop over db records and create the image html code
foreach($files as $file){
$file_links .= <<<EOD
<a href="{$file['link']}" id="{$file['filename']}" title="{$file['title']}">
<img alt="{$file['title']}" src="..{$this->imgfolder}{$file['filename']}" />
</a>
EOD;
}return $file_links;
}
}
Now that we have the functionality to retreive the images, we can start with the html (with just a tiny bit of php injected). Basically, I'll call the various jquery files, call the cycle function and let the cycle plugin do most of the work. I have also integrated a navigation menu that floats on top of the images. The css is also right in the code for the sake of clarity in this article, but you should probably save it in a separate css file. Refer to inline comments for more detail, or comment on this article and I will do my best to reply asap.
<?php
// the slide class can either be imported with an include or simply pasted here
// call the slide class
$slide = new Slide();// now print the html
?><!– Call jquery files –>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.cycle.js" type="text/javascript"></script>
<script src="../js/jquery.easing.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
// make the background of the nav bar transparent
$("#slide-background").fadeTo(0,0.65);// instantiate the slideshow
$('#slideshow').show();
// define the slideshow parameters (see http://malsup.com/jquery/cycle/ for more info)
$('#slideshow').cycle({
fx: 'scrollLeft',
timeout: 5000,
pager: '#slidenav',
// callback fn that creates the links for navigation
pagerAnchorBuilder: function(idx, slide) {
return '<a href="#" style="font-size:9px">'+slide.title+'</a>';
},
pagerEvent: 'mouseover',
fastOnEvent: true,
fit: 1,
pause: 1,
pauseOnPagerHover: 1
});// code for the pause button
$("#pbtn").click(function () {
var pbtn = $("#pbtn").html();
if(pbtn.toLowerCase() == '<a>||</a>'){
$("#slideshow").cycle('pause');
$("#pbtn").html('<a>></a>');
} else{
$("#slideshow").cycle('resume');
$("#pbtn").html('<a>||</a>');
}
});// slide down the navigation links
$('#slide-text').slideDown();
});</script>
<style type="text/css">
body{font-size:16px}
#slidenav { display:inline; line-height:20px }
#slidenav a { margin: 0.5em; padding: 0.5em 1em; text-decoration: none;color:#FFF }
#slidenav a:hover{color:#FFF}
#pbtn a { margin: 0.5em; padding: 0.5em 1em; text-decoration: none; }
#slidenav a.activeSlide { background: #F00; color: #FFF }
#slidenav a:focus { outline: none; }
#pbtn a:focus { outline: none; }
.slideimg{width:50em; border:0}
.pics{display:none}
#pbtn{cursor: pointer; margin: 1em; display:inline; font-size:0.8em}#slidenavmenu{position:relative;z-index:100; zoom:1}
#slide-background{
position:absolute;
top:21px;
background-color:#555;
width:50em;
left:0em;
font-size:1em;
line-height:20px;
}
#slide-text{
position:absolute;
width:50em;
left:0px;
text-align:center;
color:white;
top:20px;
padding-left:0.2em;
display:none;
font-weight:bold;
font-family: verdana, sans-serif;
font-size:1em;
}</style>
</head>
<body><div id="slidenavmenu" >
<div id="slide-background"> </div>
<div id="slide-text">
<div id="slidenav"></div>
<div id="pbtn" ><a>||</a></div>
</div>
</div><div id="slideshow">
<?=$slide->show_slides()?>
</div></body>
</html>
unless I forgot something, that's really all there is to it. You can easily customize this widget to your pleasing – just make sure you sync up the filename of the images and the filename fields in the database table, and then play around with the css and the jquery cycle settings, which you can find more information about on the cycle plugin site . Let me know if you need me to explain anything in more detail, I know I haven't written too much detail but the comments in the code should really help to get the gist of it.
Pingback: Rotating images using jQuery Ajax « Kevin Dubois
Hiya,
Thanks so much for this script! It's exactly what I needed!
I was wondering if there was a way to display 125 x 100px thumbnails instead of text links in the navigation bar?
Any help would be appreciated :)
Nadia, take a look at the website of the cycle plugin (http://malsup.com/jquery/cycle/) that should help you find what you need (if you haven't already)
Hi, I recently started a bloghosting platform (based on wordpress MU) and when I stumbled your blog I paid attention to your theme (looking good) so I was wondering can you tell me is it custom made theme or one of those free ones? thanks in advance! regards, blogiskewl
It's pretty much the default theme except I put my own picture in the header and added the google ad right under…
Hi Kevin
Thank for you such a great tutorial. I am having problem by following your instructions. I have renamed the database_driven_jquery_slideshow_with_text_navigation.php to default.php. Download all the plugins jquery and etc,. modified the database credentials. but when i browse the web page I see nothing.
the URL us http://templates.top-10-unlimited-web-hosting.com/test/default.php
Your help is very much appreciated.
Thank you
-Imran
Imran, it looks like the jquery.js file you're calling has invalid code in it (you copied and pasted some code with the code lines)
Kevin, I have made some modifications and I can see the image, but for some reason images are not rotating and the navigation menu is not appearing at all. All I see is the static image and no rotation alongwith play / pause button which does not work. I have exhausted all my efforts and I cannot get it to work. Please help.
Please take a look at http://templates.top-10-unlimited-web-hosting.com/test/default.php
Please let me know where I have gone wrong? As I have simply copied your code.
Thank you
-Imran
You should get firebug (http://getfirebug.com/) so you can debug better, but anyway, the debugger is telling me: [cycle] unknown transition: scrollLeft ; slideshow terminating
so scrollLeft is a transition that is not recognized by the slide show. Try 'fade' and if that works then find the transition you want on the slideshow documentation page.
If this was helpful, you can always donate a few dollars by clicking the 'buy me a beer'
Thank you, Kavin. I will try what you say and will let you know how it goes.
By the way, if it works I will buy you a big crate of beers :)
Hi Kevin, I have tried 'fade' rather than cycle but now it is showing all pictures together. I am stuck, please help.
I am using firebug but unable to understand why it is getting stuck.
Take a look at http://templates.top-10-unlimited-web-hosting.com/test/default.php
Thank you
hehe it looks like you replaced the wrong piece of code:
you have
$('#slideshow').fade({
fx: 'scrollLeft',
and it should be
$('#slideshow').cycle({
fx: 'fade',
Thanks you, Kevin. It is working now.
I owe you a crate of beers.
Regards
Hi kevin, I was download and try your sample code, but there isn't valid XHTML ( Error: end tag for element "A" which is not open), how to make it correct? I try to add //<![CDATA[]] in my script but still not valid.. just curious if it not valid xhtml hehe..
thanks,
hi dude i had been checked your "Database driven jQuery rotating slide show with text navigation and links using the cycle plugin" and i configure in php page after i run the program it shows error
the error is
"Parse error: syntax error, unexpected $end in F:\xampp\htdocs\santhosh\slide\slide.php on line 194" i need your help for a page
Hi Kevin,
i think there is an error below lines
$file_links .= <<<EOD
imgfolder}{$file['filename']}" />
Hi Kevin, how can I get that three files missed ( jquery, cycle and easing)… I dont know how to generate it..
For your attention
hi this post is just what i need but it still one more thing my images are not store in a specific folder how i can retrieved direct from the MySQL table and display it using this slide show
thank you in advance