I was recently hired to create a slideshow for a customer’s display at trade shows. For me, the solution was simple… we kill the Batman. All joking aside, I knew exactly what I was going to do from the outset of this project.
The previous revision of this client’s presentation was a combination of circa 2008 hacks and flash. This combo together yielded a surprisingly well working slideshow with menus to select and sort shows. None of this content was dynamic in any way. With relatively short notice, there was no way I was to even salvage any part of the relic that was their past show.
I opted to use Supersized, an awesome jQuery plugin by Sam Dunn of One Mighty Roar.
The unfortunate thing about Supersized is it’s method of serving images. It’s engineered to be user friendly and be easy to use for even the most inexperienced code monkey. In the packages latest release, Sam has included some demos that can safely be used as starting points. This is exactly what I did, cutting what I can only imagine to be more than a week of work out of the project. This gives me more time to focus on the fine details and saves my customer money all the while – we both win.
When you download the supersized.x.x.x.zip file and open it up, you will see this:
Thank goodness for logical naming conventions, this folder is pretty self explanatory. Core holds the most stripped down version of the Supersized slider, while Flickr offers a slider that will pull content from a Flickr feed, and slideshow is the folder we’re after. As a side note: please take time to read and follow the directions as well as licence agreements included with any plugins or work that aren’t completely yours.
The Code – Default Behaviour
The first chunk of code we’re looking for can be found in demo.html
slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
]
This is where the average user would manually enter all of the file names, locations and properties for each slide. We’re going to modify this chunk of code to scan a directory for images, and then output the images into this list. To do that we will have to use PHP. If you don’t have a server to test and develop on (I don’t blame anyone), you have no excuse to not be using XAMPP. XAMPP will emulate a server environment (sort of) on your own local machine, allowing you to work with PHP and databases. I choose to use XAMPP for this project for several reasons.
- Connectivity at trade shows is an unknown factor.
- Serving large high-resolution photos remotely is slow and gobbles bandwidth.
- By keeping files totally local, there is little to no need to account for security in PHP used.
The Code – Dynamic Behavior
Our PHP will look like this, explanation as we continue.
slides :[]
Line 1 shows that we are opening a section of php code within our page – <?php to open, ?> to close.
Lines 2, and 3 we are establishing our variables. We set where we can find the images to be used in our slideshow, and where their thumbnail images are.
Line 4 runs a command that will scour our directory that we set, looking for all files (the asterisk *) with a ‘.jpg’ at the end. Whatever files are found, are then saved to an array as the variable $images. Line 5 runs the same command for the thumbs folder.
Line 6 is where the magic starts to happen, both arrays – one for whole images, the second for the thumbnails – are combined into one array. It’s important to note that the number of files in both folders (arrays) need to be identical, otherwise the arrays cannot be combined.
Line 7 begins a foreach loop that goes through the array and for every item, gets the combined contents in order and echos them as lines that mimic our starting JavaScript.
There you have it, dynamically loading content for your slideshow.
Polishing and Future Posts
One note to make is that the naming of each file will simply be the file name as it is on your server. You can correct this with PHP’s trim and str_replace.
slides : []
These new lines must go inside of the for each loop so that the variable is refreshed with every pass of the array. Trim does exactly what it sounds like, trims what you give it. In this case it’s removing the directory path from the name of the file, and then the .jpg at the end of the name. Str_replace is capable of replacing a string of characters with another string (or nothing at all). In our case, I’m converting the underscores in file names to spaces. With these changes, the file “images/A_burning_page.jpg” will now be titled “A burning page.”
This article will be referenced in the near future when I get into explaining generating a full gallery/list of slideshows based on folders of images. Follow my RSS and comment for further help.
6 replies on “Customizing Supersize JQuery”
Hi Zach. I’m interested in combining thumbnails so I’m going through your tutorial but can’t getting it working. Just get a white screen with internal server error. Any help would be appreciated.
code…
<?php//path to directory to scan
$directory = "Wedding_Gallery/";
$directory_thumbs = "Wedding_Gallery/thumbs/";
//get all image files with a .jpg extension.
$images = glob($directory . "*.jpg");
$images_thumb = glob($directory_thumbs . "*.jpg");
$images_final = array_combine($images,$images_thumb);
//print each file name
$number = count($images);
$start = 0;
foreach($images_final as $image = $key)
{
echo "{image : 'http://mysite/Wedding/" . $image . "',thumb : 'http://mysite/Wedding/" . $key ."'}";
if ($start
I suggest making sure you can get the supersize plugin running without modification first. If you still run into issues, ensure that your file path is correct.
I never completed this tutorial to auto-generate thumbnails, and as such generated them using Photoshop’s batch image processor. You need each image to have a corresponding thumbnail, otherwise the array’s will not match.
Hi Zachary. Thanks for replying. I was able to get the plugin to work. It fell apart once I tried to add thumbnails. The path is correct and I have the same number of thumbs for each hero image. If you can’t see anything glaringly wrong with the code then it’s fine. Thanks for taking a look anyway.
Your code got mangled because it wasn’t wrapped in code tags (see below the comment box), so I can’t be certain – feel free to repost. The only other obvious area to mess up is using images other than jpgs.
Zachary,
I am getting uncaught exception error unexpected token <
Anything changed since this posting was made that I should be aware of?
[…] image discovery instead of the static HTML entries that it is written with. I found an article (http://www.zachmelo.com/customizing-supersize-jquery/) that speaks of this very thing, but the code throws the error at slides : […]