Jump to Sidebar Content | Jump to Main Page Content

Begin site navigation:
End site navigation.
Begin left menu:


End of left menu.
Begin main content:
Archive for the Web 2.0 Category
« Previous Entries | Next Entries »

Getting Lightbox and GMap to Play Nice Together: How? Slimbox

Monday, September 29, 2008 4:59 pm

I’ve built several maps using the Google Maps API, so I didn’t think I’d have any trouble building a map for a new pet project of mine: geocoding my beach sand collection. Geekiness aside, all I wanted to do was bring up a couple of infowindow tabs containing photos of sand and details about each beach. Sounds pretty easy, right?

screen image
Sand mashup beta

Shortly after beginning the project, I realized I’d have to find a solution for displaying the photos. If I just showed thumbnails, that would be pretty boring. If I showed really large photos, the infowindows would become unwieldy. If I provided links to larger versions of the photos, they’d appear in new windows and people would have to use the “Back” button to return to the map, which would cause the infowindow to disappear. Or I could embed the photos from Flickr, but then people would click away to that site and leave the map entirely.

None of these options were ideal. Then it dawned on me: why not try Lightbox 2? This elegant script produces a window that resizes according to the size of the image and showcases the content via a darkened background with nice animation effects. It’s a freely-licensed script developed by Lokesh Dhakar that’s been around for a couple of years — and widely popular on blogs and online photo albums.

screen image
Lightbox modal window

The beauty of Lightbox is that it can be triggered in a standard link tag using the “rel” attribute, and it provides exactly what I was looking for — a way to display images without leaving the current page. I figured I could just add the rel=”lightbox” attribute within my GInfoWindowTab script and be done with it. I wish that had been the case. No such luck. It worked perfectly in Firefox, but not in IE6 — the image would just open in a new window. And only for the links inside the map infowindows — test links on the same page outside my map JavaScript called up the images perfectly in both browsers.

I ran smack into a major integration conflict between the Lightbox script and the Google Maps API.

In a nutshell, the problem is that LightBox looks for the rel=”lightbox” attribute when the page loads, and then it initializes the lightbox.js script and produces animation effects when a link is clicked. The Google Maps API works differently: its required window.onload and window.onunload (or <body onload=”initialize()” onunload=”GUnload()”>) event handlers place the map on the page only after the page has fully loaded. This means that the rel=”lightbox” attribute doesn’t exist when the page loads, so Lightbox doesn’t see it and the effects aren’t triggered.

After nearly a week of achingly disturbing troubleshooting, I realized this wasn’t something that would be solved with just a little tweak. It seems to me that the only solution is to entirely re-engineer the Lightbox script so that some kind of initLightbox() function can be activated from an onclick event inside the infowindow.

If you’re thinking of going down that road, stop now and give Slimbox a try — it’s a Lightbox clone built on the mootools framework that can also be launched as an API. Slimbox works without any modification, so it’s an “out-of-the-box” solution that should function well as new versions are released. And it can be done in 5 easy steps:

1) Download Slimbox

Download Slimbox and copy the files to the directory where your Google Map is located.

2) Add the Script

Include the script in the header of your page:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

3) Add the CSS

Include the CSS reference in the header of your page:

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

4) Add the Attribute

Add the rel=”lightbox” attribute to your infowindow links.

5) Add the onclick Event

Add an onclick event to your infowindow links:

onclick='Slimbox.open(\"Image.jpg\", \"Caption\");return false'

For a slideshow, put the images into an array and add a group name to the rel attribute (consult the Slimbox.open API documentation for complete syntax information):

onclick='Slimbox.open([[\"Image1\", \"Caption1\"], [\"Image2\", \"Caption2\"]], 0);return false' rel=\"lightbox-groupname\"

** Here’s an example of the code in action


Update (12/12/2009): The above example now includes Clearbox, which has a nifty auto slideshow.


Update (02/11/2011): Here’s the Google Maps API v.3 example


I’m so stoked about this solution that I’m releasing a sneak preview of my sand mashup. Now that I’m past this stumbling block, I’ll finally get to work on this thing and post an update when it’s finished. Hopefully I have saved you some time and freed you to do wonderful things with your own maps.

Carpe diem!

End of main content.