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

[cellulove]

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]

First off, because this and similar:


<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:


<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:


//
// 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!

[cellulove]

John, I can't thank you enough for all of your help!
I am very, very appreciative! :)

[holdtotheord]

This really saved me. Thanks for the tip.