Lightbox image viewer 2.03 + image mapping

**arauf** · 04-26-2007, 07:25 PM

1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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..

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

Code:

<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-29-2007, 11:34 PM

any 1 , for help

**jscheuer1** · 04-30-2007, 02: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:

Code:

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

**arauf** · 05-01-2007, 12: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
Using Opera 9.60 build 10447
Need help with that please!
Here`s the code:

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">
<!--
body {
	background-color: #dfcfc0;
	background-image: url();
}
-->
</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:

Code:

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

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

**balename** · 04-24-2010, 11:59 PM

Really great work, this fix works pretty nice! Regards

**jscheuer1** · 03-10-2011, 01:45 AM

I'm using the same code and Script but the I can't display an HTML file inside the Lightbox is it Possible?

No. Use Lightwindow:

http://www.p51labs.com/lightwindow/

Or FancyBox:

http://fancybox.net/

Or any of the great many other lightbox type scripts out there that support HTML in the box.

**Alexander83** · 04-25-2011, 04:42 PM

Thanks a lot jscheuer1, this works great. Is it possible to group images in an image map? I tried to do it with a "lightbox[group]" but its not working. Once again thanks for all your help.

Alex

Thread: Lightbox image viewer 2.03 + image mapping

Thread Tools

Search Thread

Lightbox image viewer 2.03 + image mapping

Doesn`t work in Opera

Bookmarks

Bookmarks

Posting Permissions