Lightbox image viewer 2.03 + image mapping [Archive]

View Full Version : Lightbox image viewer 2.03 + image mapping

arauf

04-26-2007, 08:25 PM

1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Probem: First of all thnx alot for read that, actully i want to use this script for image map, but as im just a bigner coder so i am unable to fit this script in image map.

map code..

<img src="http://store.digitalscrapbookplace.com/images/alphas/06_AlphaBlocks_Lower.jpg" USEMAP="#test" BORDER=0>
<map name="test">
<area shape="rect" coords="53,45,199,206" href="a.jpg" alt="">
</map>

but..

I want , when i click on map area , that "A" in above code , than "a.jpg" which will in server come in LIGHT BOX IMAGE VIEWER.

so im making href = "#" , so that "a.jpg" open with on click function.. Now it will be something like that..

<area shape="rect" coords="53,45,199,206" href="#" onclick= " now how to call here "Lightbox funcion , that open "a.jpg" in veiwer ?">

thanx in advance for sorting it out....

arauf

04-30-2007, 12:34 AM

any 1 , for help :(

jscheuer1

04-30-2007, 03:01 AM

2.03 supports area tags. So all you need to do (besides installing the script as instructed) is add the rel attribute to your area tag:

<area shape="rect" coords="53,45,199,206" href="a.jpg" rel="lightbox" alt="">

arauf

05-01-2007, 01:38 PM

hey jscheuer1 thnxxxxxxxxxxxxx in loads , its working now , yahooooooooooo , tumbz up , thnx again..

ChilliNr1

11-05-2008, 04:10 PM

Hi,
I`ve got the same problem.
It`s fixed for the IE7 but not for Opera.
The screen is getting darker, but no picture shows up...
KLICK (http://www.danjo78.de/main/Gallery/GFriends2.html)
Using Opera 9.60 build 10447
Need help with that please!
Here`s the code:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Friends</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="../../css/lightbox.css" type="text/css" media="screen" />

<script src="../../js/prototype.js" type="text/javascript"></script>
<script src="../../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../../js/lightbox.js" type="text/javascript"></script>

<style type="text/css">

</style></head>

<body onload="MM_preloadImages('images/menu_on.gif'); initLightbox()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="right"><img src="../GalleryFiles/GFriendsNEW.jpg" width="620" height="408" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="337,6,377,57" href="http://www.danjo78.de/main/Files/ME.jpg" rel="lightbox[test]" alt=""/>
<area shape="rect" coords="382,6,422,57" href="http://www.danjo78.de/main/GalleryFiles/dave.jpg" rel="lightbox[test]" alt=""/>
<area shape="rect" coords="425,6,465,57" href="http://www.danjo78.de/main/GalleryFiles/juli.jpg" rel="lightbox[test]" alt=""/>
</map>
</div>
</body>
</html>

Thx!

jscheuer1

11-05-2008, 08:44 PM

First of all, you are not using Lightbox v2.03a (the thread you chose to post in is about that script), you are using v2.04.

Anyways, there appears to be a problem with the script. I'm not sure whether or not downgrading to 2.03a would work or not, and 2.04 has its advantages. So you can fix the 2.04 version. Find this function (around line 203 in the lightbox script) and add the highlighted line:

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');
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.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

this.changeImage(imageNum);
},

ChilliNr1

11-05-2008, 09:02 PM

GREAT WORK!
Thanks a lot man...you`re the best!!!
No solution after 5hours of searching the web in 10.000 different Forums and Blogs...
and then 1 Post to rule them all!!! :D
THANK YOU SO MUCH!!!
PS: Yes it was my fault. I`m using 2.04, but i also tried 2.03a. Doesn`t worked either...
And I don`t want to start another thread ;)