DirSlideShow and MultiSlideShow

These two scripts conceal all server-side directory indexing through a JSON interface, allowing you to set the location of the target pictures through the instantiation of one of the slide shows. If you'd like to see how to use DirSlideShow and MultiSlideShow, please check out this no-jargon tutorial.

DirSlideShow

DirSlideShow takes four arguments, which are listed below.

• newPictureDir:String — The URL of the directory containing the pictures to be displayed.
• newslideShowID:String — The id of the HTML element to which the slide show (and possibly control buttons) will be appended.
• newRotateDelay:Number — The time (in milliseconds) until the next picture is displayed automatically. If the user clicks on one of the control buttons, the slide show will stop progressing automatically.
• newControlButtons:Boolean — A boolean that determines if two buttons are displayed to allow the user can control the progression of the slide show.

Below is DirSlideShow's function signature:

DirSlideShow = function(newPictureDir, newSlideShowID, newRotateDelay, newControlButtons) {

MultiSlideShow

MultiSlideShow takes two arguments:

• newPictureDir:String — The URL of a directory which contains the picture directories.
• newContainerID:String — The id of the HTML element to which the thumbnails will be appended.

Below is the function signature of MultiSlideShow:

MultiSlideShow = function(newPictureDir, newContainerID) {

Download

I am releasing the source code of DirSlideShow and MultiSlideShow under the Apache 2.0 license.

DirSlideShow and MultiSlideShow Source Code

Demonstrations

DirSlideShow Demo

MultiSlideShow Demo

Two Convenient Javascript Slideshows

I've decided to share two of my most useful Javascript "classes": DirSlideShow and MultiSlideShow. These classes encapsulate the necessary server-side directory indexing so that you can use the slide shows through a pure javascript interface. In other words, they're easy to use. If you'd like to see demonstrations of DirSlideShow and MultiSlideShow or download them now to follow along, please visit their project page.

How about a demonstration?

Let's say that you have a bunch of pictures in the folder images/travelpics of your web server, and you'd like to show them off to your visitors. For this task, you should use DirSlideShow. First, you need to link the scripts to the page, like so:

<script type="text/javascript" language="Javascript" src="scripts/Loader.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/DirSlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/ArraySlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/addevent.js"> 
</script>

Once you have access to the classes on your page, you need to create a the slide show by passing in the name of the directory that contains the pictures, the HTML element that will contain your slide show, the time between each change of picture, and whether you want the slide show to have controls. It sounds complex, but it's actually very simple:

<script type="text/javascript" language="Javascript"> 
addEvent(window, "load", init, false);
function init() {
var slideShow = new DirSlideShow("images/travelpics", "travelpicsdiv", 5000, true);
}
</script>

As long as you have an element with an id of travelpicsdiv, the script will find it and put a slide show in it containing the pictures of the directory images/travelpics. It's that simple.

What about the other one?

The other script, MultiSlideShow, is more specialized but probably more useful. For this demo, let's assume that you have taken three trips and put the photos in three separate directories: dubai, honolulu, and newyork. Then, you put all three directories into the directory images. Before you could create a MultiSlideShow, you would have to link to the scripts:

<script type="text/javascript" language="Javascript" src="scripts/Loader.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/MultiSlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/ArraySlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/addevent.js"> 
</script>

You would now start a MultiSlideShow by passing only two arguments: the name of the enclosing directory, images, and the id of the div to be filled, travelpicsdiv.

<script type="text/javascript" language="Javascript"> 
addEvent(window, "load", init, false);
function init() {
var slideShow = new MultiSlideShow("images/multislideshow", "multislideshowdiv");
}
</script>

Voila! Your div, travelpicsdiv, will now be dynamically populated with the pictures in dubai, honolulu, and newyork. Once again, there's nothing left to do. Almost.

Configuration

The one assumption that these scripts make is the location of the directory-indexing script relative to the page on which the slide show resides. If your page is in the directory www and your scripts are in the directory www/scripts, the setup will work fine right out of the .zip file. However, if you put your html in a directory www/html and your scripts in a directory www/js, you'll need to do a little configuration. Don't worry; it won't hurt a bit.

There are only two variables in one file that need to be configured: dirIndexURL and htmlPageURL, which are both in scripts/Loader.js. dirIndexURL contains the URL of the script dirindex.php relative to the HTML page that contains the slideshow. htmlPageURL contains the URL of the HTML page relative to the script dirindex.php.

Let's go back to our previous example, in which the page resides in www/html and the script resides in www/js. To re-configure the script, you would replace these lines:

// URL of directory-indexing script relative to HTML page
var dirIndexURL = 'scripts/dirindex.php';
 
// URL of HTML page relative to directory-indexing script
var htmlPageURL = '../';

…with these:

// URL of directory-indexing script relative to HTML page
var dirIndexURL = '../js/dirindex.php';
 
// URL of HTML page relative to directory-indexing script
var htmlPageURL = '../html/';

Now, just reset the script tags properly:

<script type="text/javascript" language="Javascript" src="scripts/Loader.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/DirSlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/ArraySlideShow.js"> 
</script> 
<script type="text/javascript" language="Javascript" src="scripts/addevent.js"> 
</script>

…and set the position of the images relative to the HTML page:

<script type="text/javascript" language="Javascript"> 
addEvent(window, "load", init, false);
function init() {
var slideShow = new DirSlideShow("../images/travelpics", "travelpicsdiv", 5000, true);
}
</script>

And you're done!

I know that there are much flashier slide show scripts available for both Javascript and ActionScript with fancy transitions and flashy picture ribbons. Nevertheless, I'm almost certain that few of those scripts are as convenient, robust, and secure as this one. You can find a full description of these classes' features and usage instructions in their project page.

I love Remember the Milk!

Remember the Milk is a free task-management web application. When you start it up, it presents you with a series of lists on which you can post tasks. You can organize your tasks with priority levels, due dates, and tags or throw 'em in a pile and use the search function to find what you're looking for. The entire service can be operated through the keyboard, which makes adding and managing tasks incredibly quick.

If you would like to have your tasks on all your calendars, you can thanks to RTM's stellar integration with Google Calendar, iGoogle, your Blackberry or Windows Mobile phone, Twitter, or even through a bookmarklet (you remember those, right?)

Probably the most surprising thing about RTM is its general applicability. I didn't think I had much use for a task manager, but now I use it constantly to keep track of my school assignments, my work projects, and whatever ideas I want to save for later. Soon, I plan to write a quick-and-dirty widget to display my list of ideas on this blog.

If you want to organize your life, or you just want to keep all your notes in one place, Remember the Milk is the web application for you. Find it at RememberTheMilk.com.