cigarettes & coffee

If you are publishing iWeb to a non-.Mac server, and do not care too much for the slideshow code that is generated, this article is for you.

The Problem

Since iWeb doesn’t really have any user hooks in it for code generation (at least as of v1.1.1), any attempt to change the pages it generates is typically an exercise in frustration. And, specifically with iWeb’s Photo album slideshows, not only would the slideshow code need to be changed, but each photo album’s page would need to be edited as well to call the new code. To do this manually would be a nightmare. And if a script was written to batch edit all the necessary files after each site export, that would need to be run each time before uploading, and most likely would require a configuration file to specify which files to edit. Really messy. I’m far too lazy to do this every time I add content to my site – hell, it’s bad enough I need to fiddle with uploading the changes to the site (I really hope Apple makes the next version of iWeb more FTP publish-friendly).

A Solution

Since my web hosting provider uses Apache for it’s server software, and they have mod_rewrite enabled, automatically changing the slideshow function, without editing published pages, becomes a possibility. It may be possible to implement this technique with other web server software, but that’s left as an exercise to the reader.

The technique I’m using is to intercept requests for URLs with that contain ‘SlideShow_assets‘ as a substring, and re-write them to another URL that has replacement code. That, and a wrapper is required that will translate the JavaScript requests from the photo album page into a form that the replacement slideshow code can digest.

A bit of detail

iWeb is kind enough to create a per-album JavaScript that defines all of the URLs and captions used for the pictures in that album in the order that they are displayed on the page. This is really sweet, as some of the hard work of extracting the images is done for us already. When a user clicks on an image, the image number is passed to a function called openSlideShow2() defined in openSlideShowWindows.js that is stored in /<site>/SlideShow_assets/

Normally, this function will open a new window, load up some HTML, and display the image that was identified by the image number. However, in the hacked version, it will vector out to a heavily hacked version of lightbox.js which will use it’s display code.

Basically, that’s it. If you’re really curious to see what I’ve done, you’ll probably want to study the original Lightbox Plus code and compare that to my hacked version.

Installation

First of all, make sure your web host is running Apache, and mod_rewrite is enabled (it usually is in most ). If it’s not, you may be able to get this to work, but I have no idea how to do this on another web server.

Grab the code contained within iweb_lightbox.tgz and upload it to your web server. Although you can stick this anywhere within your document root, I’d suggest keeping it out of your iWeb-managed folders. Myself, I placed it in /iweb_slideshow in the root directory (you’ll see that in the .htaccess rules below).

If you do not already have a .htaccess file created in the root directory, create it now at the location /.htaccess and the content will be two lines:

RewriteEngine on
RewriteRule SlideShow_assets/(.*) /iweb_slideshow/$1 [L,R]

If you currently have a .htaccess file, then you probably already know what you are doing, so just make sure the RewriteEngine is enabled and stick in the RewriteRule where applicable.

And, well, that’s about it. This works just fine for me with iWeb 1.1.1, but your mileage may vary. For an example of what this looks like, check out one of my photo albums, and click on one of the thumbnails to start the slideshow. Note that with Lightbox Plus, you can use the keyboard in addition to the mouse to navigate through the album (hit ‘n’ for next, ‘p’ for previous, and ‘x’ to end the slideshow).

One handy hint: make sure you either empty your browser cache or reload the photo album page after installing before thinking you’ve done something wrong – the old slideshow code may load up from cache.

Copyright and License

The text of this article, including the code contained within, is copyright © 2006 Peter Timofejew. All rights reserved.

Permission is granted to modify the code for use, personal or commercial, as long as credit is given in the source code of the derivative work.

This code is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Note: please don’t contact me with configuration questions (such as “It doesn’t do anything”, “I can’t get this to work on my VIC-20”, etc.). If, however, you find an honest-to-goodness bug, I would appreciate knowing about it.