Slideshow Manager

Slideshow Manager

The Slideshow Manager came back to life after a friend described a need for a way to generate online "presentations" as web pages. Currently, the process involves obtaining a requirements and assets from a client, developing/modifying the image assets, designing the presentation layout/background, creating a "movie" (assembly), and delivering a link to the finished online presentation.

Most of the communication is handled via email - to include asset delivery and changes. This becomes problematic especially when change requests come after the presentation has been published live. The "movie" has to be recreated each time a post-production change request comes in.

Previously, Adobe Flash was used to create these presentations. Since Flash is not supported on Apple devices (iPhones, iPads, etc.) a more universal "assembly medium" is required (cross-browser and cross-platform).

This proof of concept uses code I developed several years ago for my music website that allowed site members to create and view slideshows with their own images and my Moody instruMental Music as background music. Members could email the link to the slideshow to friends and track the traffic for each slideshow via detailed stats reports within the original slideshow manager.

My original version used the JW ImageRotator (FLASH) as the display method. The Slideshow Manager generated a file (XML, RSS, XSPF) that was fed into the ImageRotator to display the slideshow (with music).

This proof of concept still has the ability to generate a file to be fed into a FLASH display medium, but I added the ability to use JQuery, CSS and HTML as the display medium for cross-browser/cross-platform capability.

I put together a VERY rough demo/ proof of concept. This demo is on the TOROCMS platform that I built. Keep in mind that TOROCMS is a CMS using Classic ASP (VBScript) and a SQL Server 2005 database. I use it to power all of my client websites (mine, too).

Here's the link to the demo:

  • Login using your email address ( and "password" for your password. (It's a demo site that I just put up today.)
  • On the "My Profile" page, click "IMAGES" (ignore the profile image for the moment...)
  • On the "Edit My Profile Image" page, click "My Files"
  • The "Member File Manager Page" allows site members/clients to upload files to the web server into the member folder that was created when the member account was created. This page allows a member to manage (add, preview, delete) the files in the member folder. From this page, you can upload one file at a time, but we're going to upload multiple files at once. Click the "Upload Multiple Files" link that is under the "Upload File" button.
  • Click a button to choose an image from your computer to upload to the web server. Repeat several times to choose several images. Click the UPLOAD button when you are finished. The images you upload will be the available images to pick for your slideshow.
  • You should be back on the My Profile page. click SLIDESHOWS
  • On the Slideshow Manager page, click NEW SLIDESHOW
  • Enter a title and description for the slideshow. Check the Active checkbox. Click the CREATE SLIDESHOW button.
  • You should be back on the Slideshow Manager page. Click the link in the TITLE column.
  • Now you are going to add images/slides to your slideshow. Click the CHOOSE IMAGES link in the first column under the Images label.
  • On the Choose Slideshow Images page, you should see the images you uploaded in the first column. Select multiple images in the first column and then click the ADD--> button. You can change the order of your slides by selecting an image and then clicking the up or down Order button in the far right column. Click an image name in either of the columns to preview the image. Click the SAVE CHANGES button when done.
  • You should be back on the Add/Edit Slideshow page ad able to see the images you added to the slideshow. Click the UPDATE button. This will create the file (in this case, HTML) that will be used to display your slideshow. With these instructions, you just generated the HTML file that will be used by Javascript to assemble and display the slideshow. Other file options include RSS and XML file format. I haven't implemented those formats yet because I'm still looking for a suitable "assembler" that is compatible on all platforms/devices/browsers.
  • Click the SLIDESHOW MANAGER link to get back to the slideshow list.
  • Click the VIEW link. This will take you to the slideshow that you created.

Like I said, this is a rough demo of the concept. The actual slideshow (this HTML version) is using JQuery (Javascript framework) and CSS. I coded this to mimic the WOW Slider JQuery Image Slider & Gallery. The single HTML file is cool because once the link is exposed (given out) you can view the slideshow in any browser/device without even seeing the TOROCMS that built/contains it.

Since it's my code, I can also add features to allow more detailed control over the slideshow functionality and to add background music.

Some of the benefits...

  • Clients can actually upload and manage/make changes to slideshows/slides (or not)
  • Changes are reflected in the live slideshow immediately
  • All data is stored in a database
  • Ability to generate multiple slideshow versions/formats (HTML, XML, RSS, etc.) by making a single selection
  • Customizable code
  • Customizable Slideshow designs via HTML and CSS

I haven't done any thorough testing. So, you may run into some issues. Just let me know what you find and what you think.