Database driven jQuery rotating slide show with text navigation and links using the cycle plugin

Kevin Dubois — Wed, 29 Jul 2009 17:53:15 +0000

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', 'http://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', 'http://www.kevindubois.com/blog');

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 .= <<
imgfolder}{$file['filename']}" />

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.

// 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
?>

||

show_slides()?>

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.

Was this post helpful? Buy me a drink :-)

Rotating images using jQuery Ajax

Kevin Dubois — Tue, 03 Mar 2009 23:20:21 +0000

There are many ways to rotate images on a website. In my case, I needed a way to rotate all images from a particular folder, and I wanted it so that I just have to dump images in the folder in order for the slideshow to pick them up. ** NOTE: if you want a more advanced setup with database driven slides visit my post about database driven slideshows

For this tutorial I'm going to use jQuery's framework and crossSlide, a plugin for jQuery which will allow smooth transitions between the images. If you don't have it already, you can get jQuery at www.jquery.com and the crossSlide plugin at www.gruppo4.com/~tobia/cross-slide.shtml . You'll also have to create a folder with images. You'll get the best result if all images are identical in size.

A working example can be found at duboistechnologies.com .

Download the code here

Ok, first things first: we'll need a placeholder for the images. We'll need to specify a fixed height for this placeholder too, otherwise the content below will be jumping up and down every time a new image is loaded:

I put an image in the div that will show an icon while the images are loaded…

Next step is to create a php page with some code to get all images from the folder. The getfiles function will get all files and return a string that will be formatted so it can be parsed as separate objects by the javascript eval() function… but that's for later. We just echo this string so our ajax call will pick it up. The only thing you'll need to customize is the 'imagefolder'… change this to whatever the name or path is to your folder:

echo getfiles('imagefolder');

function getfiles($folder=", $extensions='.*')
{

// path:
$folder = trim($folder);
$folder = ($folder == ") ? './' : $folder;

// validate folder
if (!is_dir($folder)){ die('invalid folder given!'); }

// create files array
$files = array();

// open directory
if ($dir = @opendir($folder)){

// get all files:
while($file = readdir($dir)){

if (!preg_match('/^\.+$/', $file) and
preg_match('/\.('.$extensions.')$/', $file)){

// feed the array:
$files[] = $file;
}
}
// close directory
closedir($dir);
}
else {
die('Could not open the folder "'.$folder.'"');
}

if (count($files) == 0){
die('No files where found ');
}
// shuffle the array so we have a random sequence of images
shuffle($files);

$return = ";
foreach($files as $file){
// format the string so we can later parse it into objects in javascript
$return .= "{'src':'{$folder}/{$file}'},";
}
$return = "[".substr($return, 0,-1)."]";

// return the string:
return $return;

}

?>

What we need to do now is set up an ajax call that gets the string of images the above function found in my images folder. We'll also have to include the jquery and crossSlide packages:

That's all there is to it. This is a great alternative to flash and is much less cpu intensive!

Was this post helpful? Buy me a drink :-)

Kevin Dubois » php

Database driven jQuery rotating slide show with text navigation and links using the cycle plugin

Rotating images using jQuery Ajax