Lightbox not working in Chome/Safari (with imagemap?) Help please! :)

**cellulove** · 05-10-2010, 09:46 PM

Ok, so first off, I'm a noob.

I recently put together my own site using Dreamweaver (and various tutorials) to try to get everything working. So far I've got IE and Firefox on board, but I can't get LightBox to work in Chrome and Safari correctly.

The problem page: http://thepaulemerson.com/photos.html

The user should be able to click a picture on the iPhone which should engage the LightBox script and show the photo (of course). I'm pretty sure that the problem lies with the fact that I am using an image map, although FF and IE don't take issue with it.

Please help! Thank you in advance!

**jscheuer1** · 05-11-2010, 12:02 AM

First off, because this and similar:

Code:

<a href="images/photo pics/1.jpg" rel="lightbox[paulpics]"><area shape="poly" coords="488,143,490,204,550,202,548,141" href="#" /></a>

are invalid HTML code, Safari and Chrome don't even know you want to open a lightbox. It should be:

Code:

<area shape="poly" rel="lightbox[paulpics]" coords="488,143,490,204,550,202,548,141" href="images/photo pics/1.jpg" />

Fix the others accordingly as well. You cannot have a link inside of a map.

Once you fix that though, there will still be problems. Find this in lightbox.js (starting around line 200 in that file) and add the highlighted line as seen below:

Code:

    //
    //  start()
    //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    //
    start: function(imageLink) {    

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        // stretch overlay to fill page and fade in
        var arrayPageSize = this.getPageSize();
        $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

        new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

        this.imageArray = [];
        var imageNum = 0;       
        imageLink.rel = imageLink.getAttribute('rel', 0);
        if ((imageLink.rel == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tag . . .

That's it. Enjoy!