I’ve spent a lot of time looking for a nice-looking, easy to use, user-friendly slideshow script. I haven’t found much until now–Lightbox has it all. It’s based on the prototype framework and Scriptaculous AJAX effects library, but you don’t even have to know that to implement it.

Here’s an example:

The instructions are short and sweet:

1. Upload a small set of files to your webserver (.js files, a .css file, and some images). Files are here.
2. Anywhere in the page, add 4 lines of code that reference the three Javascript files and one CSS file.
3. Add a thumbnail image to your web page. Link this image to a larger version. Inside the anchor tag, add the following:
   rel=”lightbox”
4. For an image series, add the following to the anchor tag for each image in the series:
   rel=”lightbox[name-of-series]“
   Each image should have the same series name. When the viewer holds the mouse over the image, a navigation button will appear (Previous on left, Next on right).

I’ve put up a longer slideshow example here.

Keep the peace — create separate profiles, and everyone keeps their own stuff: bookmarks, saved passwords, cookies. It’s quite easy. The Mozilla knowledge base explains how.

1. From Start->Run, type firefox -profilemanager (Windows; see above link for other environments).
2. Click “Create” to create a new profile. Choose a new, empty folder to place it in. This folder should be easy for you to find and differentiate. Example: C:/Program Files/Mozilla Firefox/profiles/MyName.
3. In the C:/Program Files/Mozilla Firefox directory, copy the Firefox shortcut.
4. Rename the shortcut to your new profile name, and move it to the desktop.
5. Right-click on the shortcut and choose Properties. Add “-P “MyName” to the end of the target line. For example, the new target for the shortcut should be: C:/Program Files/Mozilla Firefox/firefox.exe -P “Caitlin”
6. Create additional shortcuts for each profile.

I love that it’s free and very easy to install, but for my purposes there are a few drawbacks:

• can’t enable it for one link and disable it for another one
• no previews of PDFs or images within the same site

Still, it has great potential to make a site more usable (and beats learning how to code a preview-on-hover yourself).

The issue: we designed an application that requires users to fill out a form, then displays their errors in a popup window. It’s a lengthy form that can present many errors, so showing the errors on the form itself wasn’t a good solution. We chose the dreaded popup window. Certainly our choice warrants further debate, but the coding is done and here we are.

Our thinking: we’ll explain to people how to allow popups for our site, and their popup blockers won’t be a problem. (Tools – Options – Popups – Allow. Not so hard.)

Not so. In end-user testing, we realized that some people don’t know they have popup blockers in the first place. Hence, they don’t try to unblock our site.

Example: “I didn’t need to remove the popup blocker — the site worked fine. However, I didn’t get a confirmation message when I submitted the form.”

Hmm…. what the? … lots of chin scratching. Aha! She didn’t get a confirmation message because the form had errors she didn’t see. This user never knew she was missing the popup windows.

So here’s the solution, after a bit of Google searching: Will Bontrager’s popup killer test. Thanks Will! His site explains very clearly how to implement this code.

Basically, create three small blocks of javascript code in the Head section of the page; then call the function in the body tag, put one bit of script inside the body section, and you’re done. The javascript tries to launch and close a popup window when the page loads. An alert message displays after the test, informing the user that she either can or can’t see popup windows from that site.

Problem solved.

This standalone version of IE6 works pretty well for basic testing of CSS and layout issues.

Here’s the issue: I used my favorite technique for creating CSS tooltips on a form. Next to each form field is a [ ? ] which, when moused over, gives the form-filler-outer some useful guidance.

“It works fine in Firefox” has become my new nickname.

It also works in IE7. However, mysteriously, when you hover over a question mark next to a dropdown list, in IE6 the dropdown list will always stay on top of the tooltip.

It does this:

When it’s supposed to do this:

The solution is to write a bit of javascript that creates a temporary Iframe around the Select element. I found the code here.

Not the easiest fix for me to figure out, but it works.

Now if everyone would just switch to Firefox (please!) my life would be much easier.

However, I was having trouble getting Subversion and Dreamweaver to play nice. You see, Subversion places a “.svn” directory inside each of the directories that you commit to the repository. This contains the files that keep track of your versions. But if you publish to the web straight from Dreamweaver, the .svn folders go too. The only way I could think of to prevent this was to manually cloak each .svn directory, which needless to say is a huge pain.

Blog search to the rescue! Josh Buhler.com pointed me to a Dreamweaver extension that automatically cloaks all .svn folders in your website. After you download the extension and install it with Extension Manager, there will be a new choice under the Commands menu: Cloak SCM Directories. Easy!

Thank you Eric – this technique saved me a lot of time. I was looking for a way to make an entire table row highlight (change color) on mouseover. This technique has the added bonus of grabbing the hyperlink from one column and applying it to the whole table row as well.

It’s just a little bit of JavaScript and a few CSS styles. I’ve posted an example here. Easy!