Results 1 to 6 of 6

Thread: lightbox multiple links to one image

  1. #1
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default lightbox multiple links to one image

    1) Script Title: Lightbox image viewer 2.03a

    2) Script URL (on DD):

    http://www.dynamicdrive.com/dynamici...box2/index.htm

    3) Describe problem:

    I have and image on a page that Is using lightbox for zoom. Additionally, I have a button that has a hyperlink to the same image and want that to also use lightbox for zoom. The problem is that when selecting either the image or the button, the lightbox does zoom, but it shows that is has 2 images (ie 1 of 2). I simply want both links to only display on image in the lightbox.

    see below of the code I am using. I am simply including the lightbox class in my <a> definition. I have tried multiple iterations on enabling lightbox in difference ways, without any luck.

    Code:
    <table width="300">
    	<tr>
    		<TD width="300" height="300" rowspan="1" valign="top"><a href="<%=getCurrentAttribute('item','custitemimage_500')%>" title="<%=getCurrentAttribute('item','storedisplayname2')%>" class="lightbox"><img src="<%=getCurrentAttribute('item', 'storedisplayimage')%>" border="0" /></a></TD>	
    	</tr>
    
    	<tr>
    		<td>		
    			<div>
        			<div style="padding-left: 0px; width: 300px;">
              			<div style="height:40px;">
    	        			<div class="lnk-HedOff" style="background-color:#fcb124; color: rgb(3, 3, 3); font-family: Arial,Sans-Serif; font-weight: bold; font-size: 12px; height: 40px; text-align: left;">
    			
                        		<div style="text-align: center; padding-left: 80px; padding-right: 80px; padding-top:10px;">						
    								<a href="<%=getCurrentAttribute('item','custitemimage_500')%>" title="<%=getCurrentAttribute('item','storedisplayname2')%>" class="lightbox" style="text-align: center;">Select For Image Zoom</a>
                        		</div>
    						</div>                 
              			</div>
    				</div>				
    			</div>
    		</td>
    	</tr>
    </table>
    Any incite would be greatly appreciated!

    Thanks,
    John
    Last edited by jscheuer1; 10-08-2009 at 03:47 PM. Reason: proper code formatting

  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

    Lightbox image viewer 2.03a is actually supposed to remove duplicate images. But I think the implementation was broken in that version. I have a tweak which restores it. However, from your example markup I see that either you copied it wrong, or you are not using Lightbox image viewer 2.03a, which requires that the rel attribute of the link be set to lightbox, not its class attribute as you have it. Some other lightbox type scripts do employ the class attribute - I suspect it is one of those that you are actually using.

    If you want more help:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    good catch. I am actually using a different version of lightbox. I'm using the original - http://leandrovieira.com/projects/jquery/lightbox/

    Apologies if I shouldn't be posting here - I wasn't sure and am desperate for help.

    I did come up with a solution in that I use 2 different classes (lightbox1, lightbox2) and also define 2 functions to be invoked, one for each class. this isn't the most elegant or scalable solution, but seems to work.

    Thanks,
    John

  4. #4
    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 not the original lightbox, but since that's not terribly important to me, I will not belabor the point except to say that as far as I know, the original is by Lokesh Dhakar and is featured here:

    http://www.dynamicdrive.com/dynamici...tbox/index.htm

    It cannot do what you say is causing a problem. It only shows one image at a time, no next/previous business, no image 1 of 2 stuff, in short - no gallery effect. But it is old and not all that great of a script considering what all is available today in this regard.

    Now, using the version you say you are using, you can probably define both in one function at least. Something like:

    Code:
    $(function() {
    	$('.lightbox1').lightBox();
    	$('.lightbox2').lightBox();
    });
    Added later:

    To get jQuery Lightbox 5.0 to automatically remove duplicates, place this function at the very beginning of the (uncompressed) script:

    Code:
        Array.prototype.lbuniq = function(){  // added to remove duplicate images
          for(var i = 0; i < this.length; ++i)
            for(var j = this.length-1; j > i; --j)
              if(this[i][0] == this[j][0])
                this.splice(j,1);
          return this;
        };  
    /**
     * jQuery lightBox plugin
     * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
     * and adapted to me for use like a plugin from jQuery.
     * @name jquery-lig . . .
    And add this (at what will now be about line 91):

    Code:
    			} else {
    				// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references		
    				for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
    					settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
    				}
    			}
    			settings.imageArray.lbuniq();
    			while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
    				settings.activeImage++;
    			}
    Last edited by jscheuer1; 10-08-2009 at 05:31 PM. Reason: add info
    - John
    ________________________

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

  5. #5
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    thanks for your response! I really wasn't sure which one is the original, thanks for the history lesson.

    I will definitely try to combine my 2 functions into one as you suggest as well as the other suggestions.

    Thanks again,
    John

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

    Just as a follow up here, I was playing around with the jQuery Lightbox 5.0 main javascript file a bit more and came up with 'minified' and 'packed' versions that can perform this remove duplicates function. Let me know if you want one of those, as I understand most folks running jQuery anything usually want a minified (jsmin) version of the script, sometimes a packed (packer) version.
    - John
    ________________________

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

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
  •