lightbox multiple links to one image

[jrattinger]

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.



<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

[jscheuer1]

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.

[jrattinger]

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

[jscheuer1]

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/dynamicindex4/lightbox/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:


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


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


} 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++;
}

[jrattinger]

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

[jscheuer1]

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.