get size on image

[ketels]

1) Script Title:
LightBox

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

3) Describe problem:
I'd like to print the image width and height in the title of the image.

[jscheuer1]

Print? I hope you don't mean for the printer only. Anyways, if not, just search in lightbox.js for the line that begins like this:


Element.setInnerHTML( 'caption'

there's only one, change that whole line to:


Element.setInnerHTML( 'caption', imageArray[activeImage][1]+' ('+imgPreloader.width+' x '+imgPreloader.height+')');

Make sure to include a title attribute with each rel="lightbox" link on your page, it can even be:


title=" "

if you want.

[ketels]

Print? I hope you don't mean for the printer only. Anyways, if not, just search in lightbox.js for the line that begins like this:


Element.setInnerHTML( 'caption'

there's only one, change that whole line to:


Element.setInnerHTML( 'caption', imageArray[activeImage][1]+' ('+imgPreloader.width+' x '+imgPreloader.height+')');

Make sure to include a title attribute with each rel="lightbox" link on your page, it can even be:


title=" "

if you want.

Doesn't seem to work.
I didn't put the code where you said though... The thing is that I've rewriten the code where the link is.



return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" OnClick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>'


This is where I'd like the wiidth and height to be a bit larger than the image.
So what can I write instead of: width=500,height=600\' ?

[jscheuer1]

Well, you should put it right where I suggested. However, your modification:



return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" OnClick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>'

is flawed. It should be:


return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" onclick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>' : ddimageTitle;

So that the entire DD added function now looks like so:


function getImageTitle(anchor){ //DynamicDrive.com added function that allows the caption("title") to be linked ("rev").
var ddimageTitle=anchor.getAttribute('title')
var ddimageTitleURL=(ddimageTitle!=null && ddimageTitle!="")? anchor.getAttribute('rev') : null
return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" onclick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>' : ddimageTitle;
};

[ketels]

Well, you should put it right where I suggested. However, your modification:



is flawed. It should be:


return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" onclick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>' : ddimageTitle;

So that the entire DD added function now looks like so:


function getImageTitle(anchor){ //DynamicDrive.com added function that allows the caption("title") to be linked ("rev").
var ddimageTitle=anchor.getAttribute('title')
var ddimageTitleURL=(ddimageTitle!=null && ddimageTitle!="")? anchor.getAttribute('rev') : null
return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" onclick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>' : ddimageTitle;
};

It's right. I just didn't write that entire code...

But still... The window size... I'd like the window size to be set dependign on picture size.

[jscheuer1]

But still... The window size... I'd like the window size to be set dependign on picture size.

Still? First I've heard of it. I'll have to get back to you on that.

[jscheuer1]

OK, now let's see. After the lightbox displays the image, you want the user to be able to click on the caption in the lightbox and have it pop up a window with the same image in it with that window tailored to the dimensions of that image? Why?

[ketels]

OK, now let's see. After the lightbox displays the image, you want the user to be able to click on the caption in the lightbox and have it pop up a window with the same image in it with that window tailored to the dimensions of that image? Why?

The reason is.. well simple.
I hae a galery. You can view all photos but you can also click the "buy" button.
Here you'll see the shoosen picture and a number of options for buying the photo.

Therefore I have the popup-script and therefore I want to use the picture size (plus a fiew pixels).
To use it to resize my popup window.

Do you think it's "do-able"?

[jscheuer1]

Yeah, I get it now. You cannot use imgPreloader.width/height in the getImageTitle function because they're not available yet, but you can use tokens in the string created by the getImageTitle function later in the line I was talking about to replace them with the imgPreloader.width/height values which will be available at that point. As it currently stands, if you are using this getImageTitle function:


function getImageTitle(anchor){ //DynamicDrive.com added function that allows the caption("title") to be linked ("rev").
var ddimageTitle=anchor.getAttribute('title')
var ddimageTitleURL=(ddimageTitle!=null && ddimageTitle!="")? anchor.getAttribute('rev') : null
return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="#" onclick="MyWindow=window.open(\''+ddimageTitleURL+'\',\'Window\',\'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,heig ht=600\'); return false;">'+ddimageTitle+'</a>' : ddimageTitle;
};

You can use the 500 and the 600 as the tokens, and have this at the Element.setInnerHTML( 'caption' line, like so:


Element.setInnerHTML( 'caption', imageArray[activeImage][1].replace(/500/, imgPreloader.width+20).replace(/600/, imgPreloader.height+50));

to replace those tokens with the values now available plus whatever you like (in the above I add 20 to the width and 50 to the height).

[ketels]

I really don't know what to say... You are my savier...
THANK YOU!!!!