Results 1 to 3 of 3

Thread: Lightbox viewer in image maps

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    917
    Thanks
    120
    Thanked 2 Times in 2 Posts

    Default Lightbox viewer in image maps

    1) Script Title: Light box viewer

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

    3) Describe problem: Is it possible to have the lightbox by clicking from an image map ? The below code doesn't work, so how would it ?

    Code:
    <MAP NAME="imgmap">
    <AREA SHAPE=rect COORDS="105,10,151,46" HREF="http://www.cecicasariego.com/img/imggroot/PTabuelo.gif" rel="lightbox" title="<font color='#666666'>&nbspHr. Roger Mazereel (21 x 33 cm)<br>&nbspkleurpotlood op papier<p></font>">
    </MAP>
    <img src="indexlogo2.gif" border="0" USEMAP="#imgmap">

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is actually a bit easier than I thought. The lightbox.js file needs one modification. Find this:

    Code:
    	initialize: function() {	
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('a');
    
    		// loop through all anchor tags
    		for (var i=0; i<anchors.length; i++){
    			var anchor = anchors[i];
    			
    			var relAttribute = String(anchor.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				anchor.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    Change it to this:

    Code:
    	initialize: function() {	
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('*');
    
    		// loop through all anchor tags
    		for (var i=0; i<anchors.length; i++){
    			var anchor = anchors[i];
    			
    			var relAttribute = String(anchor.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				anchor.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    Now, about your call - using font tags in the title attribute may cause problems. You should style the text in the lightbox.css file. Here is where the style is set in the lightbox.css file for the information displayed from the title attributes:

    Code:
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
    	}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    917
    Thanks
    120
    Thanked 2 Times in 2 Posts

    Default

    And this is just fantastic !!
    For other people that follow this:
    I could keep a bit of the html in the code itself (<title>), and added an <alt>, so what you get onmouse-over is the <alt> (see code)
    Code:
    <AREA SHAPE=rect COORDS="105,10,151,46" HREF="http://www.cecicasariego.com/PT.gif" rel="lightbox" alt="Roger" title="Hr. Roger Mazereel (21 x 33 cm)<br>kleurpotlood op papier<p>">
    And in the head (to fix the color of the title):
    <style>
    #caption {color:#666666;}
    </style>
    And in the css:
    Code:
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
                 margin-left: 2 auto;
    	}
    I am a happy man !! Thanks !

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •