SlidePanels Tool

This tool generates a tabbed slideshow, with some very sophisticated layout options, which you can download as HTML and add to your site.

You may view a demo or get to work on your own slideshow.

Installation

To use the SlidePanels tool, you need to download a tiny amount of javascript and css.

And add them to your page, with a little code to invoke them:

   <link rel="stylesheet" type="text/javascript" src="slidepanel.css" />
   <script type="text/javascript" href="slidepanel.js"></script>
   <script type="text/javascript">
      jQuery(function($) {
         // runs when the document is done rendering
         // activates the SlidePanel plugin for all elements with class 'SlidePanelInsert'
         $('.SlidePanelInsert').slidePanel();
      });
   </script>

Then you use the tool to generate your slideshow panels, and copy/paste them into your HTML document.

Building Tab Images

The tab images are sprites, which makes load times considerably faster. Create them by making each image twice as tall as the tab, then placing the mouseover/active image below the main image, like the image below.

More Tips

Your panel height should generally correspond to the combined tab heights (i.e. 5 tabs x 100px tall = 500px panel)

Your tabs need to all be the same height.

You need to have jQuery 1.2.6 (yes, it's used in production on this old, old version) or greater installed

Getting Help

Get answers to questions, problems, or bugs at the GitHub repository.