Jump to Sidebar Content | Jump to Main Page Content

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

Pages

 
Search
 
Links
 
Subscribe
 
End of left menu.
Begin main content:
Blog

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!

Comments

  1. Awesome! People ask about lightbox integration on the group all the time. You might want to post it there to let people know about this. Thanks!

  2. Betsy,
    Well done! I’ve been looking for a way for Google Map Markers to display graphics the way my CMS can using lightbox. Speaking of which, I noticed you mentioned a move to a CMS; my site is a small example of Joomla that I put on a linux box at home.

    Again, thank you for the solution and I’ll be mentioning your how-to on my site.

    Best regards,

    Tony

  3. Hi,

    Thanks for this tip but I am not programmer and I have a syntax problem that I don’t understand.

    My link is generated by a php scrip in a function.
    Here is the return: $returnstring = ‘\n‘;

    I don’t know how to put onclick=’Slimbox.open(/”Image.jpg/”, /”Caption/”);return false’ in the link because of the \” ‘ /”………

    If you could help me…

    Regards
    Seb

  4. It doesn’t work!

  5. Great work, I love it! Any suggestions on how to add several related images to a single marker infowindow?

  6. Glad to hear it worked for you! I added a second marker to the sample map to demonstrate a slideshow. Essentially, you need to put the images into an array, such as this: [['image1', 'caption1'], ['image2', 'caption2'], 0] and add a group name to the rel attribute. The number that follows is the index of the image you want to show first — zero would be the first image in the list.

    Come back when your map is done and show off your work!

  7. Just a note to everyone: The above example is a very simple static Google map that calls up Slimbox.open from within a createMarker function. You absolutely need to make adjustments if you are using an external data source, trying to integrate a map into a custom application, or embedding a map into a blog or CMS.

    Check out the Slimbox.open API documentation for more info. If you’re new to the Google Maps API, visit the developer docs and follow the discussion in the Google maps API forum.

  8. Nice solution, Betsy, it works for me: http://files.tourofcalifornia.org/map.html?11?0 Also nice mashup you created!

    There are other libraries with an even smaller footprint (e.g., http://www.doknowevil.net/litebox/), it would be interesting to see if they support an onclick event.

  9. Whoa! Ausgezeichnet! What a cool map, Bernd. I love meeting people who are following their passions. Thanks for sharing, and more power to you!

  10. Hi Betsy,

    I upgraded to Slimbox 2, which uses jquery instead of mootools. The API documentation can be found here (http://code.google.com/p/slimbox/wiki/jQueryAPI). Basically you need to replace Slimbox.open(…) with jquery.slimbox(…). An example can be found here (http://map.tourofcalifornia.org/?29?0).

    Cheers,

    Bernd

  11. I am doing something similar and have run into a snag. My site is here http://www.pindropr.com. It is a social geo-enabled photo blogger or sorts. But when I have an apostrophe in the title is mucks everything up. I think I have noticed the same thing in your sand site but you worked around it by removing the apostrophe altogether. The title on the infowindow still has the apostrophe but not your description when the photo is opened into slimbox.

    I have tried to escape on the PHP side but no luck.

    Here is a pindrop with an apostrophe in the title http://www.pindropr.com/?pin=649 click the thumb and it won’t load. Try any other pindrop on the map without an http://www.pindropr.com/?pin=649 an it is fine.

    I need to figure out why even after escaping an http://www.pindropr.com/?pin=649 in JS it still break.

    Cheers and good tutorial.

  12. Awesome, Bernd! Thanks for the follow-up — the jquery version will make a lot of developers very happy. Glad to see that you’re still cycling strong!

  13. Okay, I have found a fix that was pretty easy. Just replace the single quote with the ascii version using JS and split.

    desc = desc.split(“‘”).join(“'”);

    Slimeblox likes it and fixes the issue.

  14. Pindropr, yes, you are correct — I have been omitting the apostrophes in the photo descriptions. Thanks for sharing your fix for this issue.

    That’s a sweet GMap/Flickr mashup you’ve got there…I may be taking a second look at their API.

  15. You can also use lightbox by using the following in your a tag:

    onclick=”Lightbox.start(this, false, false, false, false); return false;”

  16. You’d think so, Ben, but it failed for me in IE6. Lightbox initializes before the map is written to the page (see paragraph 6 above.) Hence, the Slimbox API.

  17. Thank you Betsy!
    I’m really not good enough to start hacking Lightbox to do exactly what you did here. I’ll give Slimbox a try

    Simon

  18. very nice and simple

    But i have a question. I did not see a way to make the slideshow play you have to manually click next. Is there a way to make slimbox do this or can you recommend a application other than flickr that changes the photos without the user clicking next this, will be embedded in a Gmap infowindow.

    thanks

  19. Hi Jamie,

    You’d need to modify the Slimbox code — it doesn’t appear to have an autoplay feature nor does it permit Flash, which would be another way to embed a slideshow. I recommend trying Clearbox or Microsoft Photosynth. Here are some examples. Hope that helps.

  20. Betsy,

    I noticed that for the ClearBox gallery to work, all of the pictures have to be in the same InfoWindow. Is there a way to do it if they are in different info windows?

  21. Hi Jon,

    For multiple Clearbox galleries, give each one a unique name: e.g. gallery=apples, gallery=oranges. I updated the example with another marker to show the syntax. Hope this helps.

  22. I understand the gallery name, but it only seems to work within each separate gmap info window. Is there away to connect pictures with different pin locations and info windows into one gallery? Thanks!

  23. Hi Jon,

    Yes, create a custom array. See Marker 6 in the example. The array is inside an infowindow, but I also added an example of how you could link to it from somewhere else. Let me know if that helps.

  24. Thank you so much – it never occurred to me to put it into a matrix. Now I just have to get preview images to work (built into ClearBox).

  25. Great stuff, Betsy. I integrated this into my v2 project and it was a huge hit. Now that I’m migrating to v3, I’d like to retain this functionality, but have hit a few snags:

    http://pages.towson.edu/preese/campusmapv3/test/nov30.html

    Mainly, slimbox works in FF and IE, but not in Chrome and Safari. Any chance you’ll revisit this for v3? Thanks!

  26. Hi, im a Cuban freelancer developer, i like to know how to implement tabs on info window like first screenshot. Im working on a event organizer project and like to implement something like that to show various events on same location but different dates.

    have nice day and please help me

    Dairon

  27. To anyone who stumbles across this entry: I’ve updated my nov30.html example so that it works across all browsers. I switched to SlimBox2 (and jQuery along with it) but it now works properly.

  28. Hi Phil,

    Great example, thanks for sharing! Didn’t intend to ghost on you, I’ve just been swamped.

    I’ve been getting up to speed on V3 over the last couple of weeks and reading about event closure handling. The crazy thing in Chrome was that you could see Slimbox launch super fast and then abort. The issue is independent of Slimbox or anything else — it’s in how Google re-engineered the infowindow.

    Setting global infowindow and map variables as you have is the right structure, and including a loop or callback function with infowindow.close(); to check for and close open markers to prevent the JavaScript “leak” from window to window.

    What I love about your map is how you’ve provided a URL for each marker. I’ve been trying to figure that out for some time now. I’ll try to share more thoughts on this and update the tutorial in the coming days…maybe merging some of your map with the testing I’ve been doing, if that’s OK.

    Again, thanks. Based on the traffic to this post this matter has been frustrating a lot of people!

  29. Hi Dairon,

    Unfortunately, Google didn’t include openInfoWindowTabsHtml() in V3 so there isn’t a native way to create tabbed infowindows. You need to construct the tabs yourself. They offer a code sample and you can learn more about V3 infowindows here. Good luck!

  30. [...] [...]

  31. Hi Betsy

    I’d really appreciate your help with the Clearbox ‘array’ in your example. Your array (marker 6) appears to be working – ie. all four images with array attributes appear in clearbox. However when I use same code only two images show (those called direct from within ‘var marker’ code).

    In the end I copy/pasted your entire code (changing nothing except API key) to a test website where I setup the clearbox js code and created images of the same name – yet marker 6 (array) still doesn’t call the CB Gallery array at all – only two images show.
    Website Example

    What have I missed here? It must be something simple. If you could clarify whatever I’m missing I’d be so grateful.

    Thank you

    Sam

  32. Hi Sam,

    You did absolutely nothing wrong. I updated to the current version of Clearbox 3.7 and was able to replicate the problem. It looks like cb_core.js has been completely rewritten and the gallery feature isn’t functioning correctly, at least not within this context.

    I wasn’t able to get the gallery working properly within the infowindow or even from a standard link on the page. But I did sleuth around in cb_config.js and set CB_OSDShowReady=’off’ to disable the “clearbox is ready” prompt. ;)

    My new favorite is @jacklmoore‘s Colorbox. I added an example for it — inside infowindows, call it directly. Single images work like a dream, but the gallery feature is tricky (though I bet Jack would offer some help on this.) This is a likely solution going forward with Gmap V3 since it has callbacks and plenty of methods to hack up a custom solution for Google’s new infowindow structure.

    Give it a try. To prevent conflicts I split the original example into separate pages for each lightbox variant:

    slimbox
    clearbox
    colorbox

    Hopefully this helps — let me know how it goes!

  33. Hi Betsy,

    Really appreciate you taking the time to look into that for me. I assume your current example of clearbox is working off a previous version (not Clearbox 3.7).

    I’m just going to download colorbox now and give that a go. Hopefully my next comment will include a link showing my wonderful finished product :)

  34. Hi Betsy,
    This is a huge help already for my project. Do you know how to open up the lightbox when you click the marker and not from the info window?

  35. Hi, I’ve successfully used Slimbox to open images in a lightbox from a Google Maps info-window – see http://www.joyce-ulysses.net/?q=node/20 – but I haven’t succeeded in doing the same for a video. Slimbox doesn’t seem to cater for videos, and other lightbox applications I know which do – e.g. prettyPhoto – won’t work from the info-windows.

    Any suggestions would be very welcome.

  36. Hi Geoff,

    *love* your Ulysses map, what a great idea! You’re going to want to switch to Clearbox for video content – see the V3 example here. You can also use Colorbox and I have a working example if you need it – works nicely for single photos or videos via iframe.

    Let me know how it goes!

  37. Many thanks, I’ll get to work on Clearbox for video content (it’s for another site, not the Ulysses one) – but I’d be grateful also for the Colorbox example.

  38. Clearbox is now working fine on my server – http://www.geoffwilkins.net/LEHHT/lightbox-video.htm – thanks again – but it would be good also to see the Colorbox exaqmple.

  39. Sorry for the wait, Geoff. Here’s the Colorbox example, loads in a new map. I’ve worked with it before and am unable to resolve how its galleries behave inside infowindows. However, it works great for other content. Hope it helps!

  40. Do you have any idea how much you rock right now? I used onclick=’jQuery.slimbox( instead of onclick=’Slimbox.open(.

    Thanks for taking the time to post this and stopping my brain from breaking any longer!

  41. Hi Betsy,

    Thank you so much for your time and expertise. My use case would involve galleries and movie contents. At the present time, what do you recommend as the best lightbox variant?

    BTW, Mr. Wilkins, I LOVED the clip of fine and mellow on your server.

  42. Attractive section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire
    actually enjoyed account your blog posts. Any way I will be subscribing to your feeds
    and even I achievement you access consistently
    quickly.

Add Your Comment



End of main content.