As part of my last but one chapter of the book (Yay!) I came up with the idea of a dynamic image badge – much like flickr’s badge but one that loads thumbnails from a folder instead of using the flickr REST API.

I christened the solution badgr and would welcome feedback:

• Check out badgr now

What it does is turn a link like:

Animals

into a thumbnail gallery that displays the large photos lightbox style (but without the greying out of the whole page).

Just a quick reminder that you can drastically cut down on loop iterations by using the break and continue commands, and that there is an option to label loops to allow nested loops to stop their parents from iterating.

The Muffin Man Stuart Colville asked me earlier today how supported labels are in loops and breaks and I was confused at first as I had not heard or – more likely – forgotten about that feature.
(more…)

It took me a while to find a tool to put my pictures on the web that does not create horrible HTML code and isn’t clunky to use. Most picture packages have outgrown their usefulness over the years and have become bloated media browsers with proprietary formats.

Then I discovered Google’s Picasa and was instantly taken by its simplicity and slick interface.

I now discovered that you can “Pimp your Picasa” with own templates and created one myself.

You can download the template as a zip and unpack it to the template folder of your Picasa installation (on my PC this is c->Program Files->Picasa2->webtemplates). The template zip contains all the files in a folder called “dompreview”.

To export images, all you need to do is highlight them, press ctrl+w, choose the template and the image size and Picasa will do the rest.

The template features

• HTML standard compliant output
• Display of the big images in a layer above the thumbnails instead of a new page if the visitor has JavaScript enabled
• Normal “new page” display when JavaScript is not available.

You can tweak the styles.css to your needs.

For a demo check the Santorini Picture Gallery .

The only thing I am missing a lot is that you cannot define alternative text for the images in Picasa, or am I missing something?

Update Following several requests, the large picture will now always stay in the visible area when you have to scroll the page, and not stay glued to the top. All you need to replace in already existing galleries in the dynpreview.js file.

I just put up a proof of concept for the AJAX chapter of my book. For years I have ranted about DHTML multi level menus simply assuming that every user wants to have every page in the sitemap as an item in the navigation.

My idea was to make the enhanced navigation optional and allowing the user to decide initially.
Check out the example:

• Optional AJAX navigation

It uses PHP to only provide a chunk of the full navigation automatically replacing the current link with a strong when JS is unavailable and when JavaScript is available it offers a link that turns the navigation into a multi level tree menu loading the main page content via XHR.

What do you think? Helpful? I think it is a lot less obtrusive than a lot of fancy menu systems out there while offering the same options.

I finally reached the AJAX chapter in my book and had to dabble with it for the first time (yes I know I should have done it earlier, but I work behind a proxy in the office that doesn’t let any outgoing requests through).

The first outcome is FeedNav, a RSS feed displayer: Have a look and I’d be happy about feedback here on the blog.

• Check and get FeedNav – an AJAX RSS displayer