Something is wrong with images with Lightbox 2.04

**ambercakes** · 02-07-2009, 12:25 AM

Hello again. I hope someone can help me with my page. I am using Lightbox 2.04 by Lokesh and when I click on the images from the page stated below, the images are like jumping or the lightbox is jumping (I have to click on more than 1 moving gif to have it happen). Maybe because this particular page has more than 1 moving gif image? It does it to another page with more than 1 gif image as well. What can I do to fix this problem? Please help. Thanks in advance for any help.

http://ambercakes.com/TagGraphicsChristmas.html

By the way the other day, John from here told me to change the prototype file (you can see my other thread re the invalid argument). First I had a problem when I X out of a lightbox image then try to click on another image, a box would come up but it would be all white. He said to change a part of the coding to this coding (which I did) I it worked for what I wanted but now I have a new problem: Here is the coding that was changed between line 1918 & 1931.

for (var property in styles)
if (property == 'opacity') element.setOpacity(styles[property]);
else /*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
elementStyle[(property == 'float' || property == 'cssFloat') ?
(Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
property] = styles[property];/*@cc_on @*/
/*@if(@_jscript_version >= 5)
} catch(e){};
@end @*/

return element;

Josie

**jscheuer1** · 02-07-2009, 07:19 AM

This only appears to be a serious problem in IE. However there is some minor resizing of the image data container (where the caption and Close link are located) even in other browsers (similar to what IE does on the first animated image when loaded into the lightbox). I know that just in general IE has some issues with animated gif, not always working harmoniously with them. And Lightbox 2.04 is a bit flawed, though in many respects a very nice script. Also, your other styles for the page may be playing a role. Try as a test viewing the page without any of them including the on page stylesheet, use just the lightbox styles. If that fixes it, we can find the style or styles from your other stylesheets that are causing the problem.

In the end though, there may be no solution to this, as it truly appears that an endlessly looping animated gif image sends mixed signals to the browser.

I will play around with it a bit, using other image galleries to see if there may appear to be any hope, as this is bothering me - as much if not more than it is bothering you.

**jscheuer1** · 02-07-2009, 07:33 AM

OK, this Lightbox clone using jQuery seems to not have that problem:

http://plugins.jquery.com/project/jquerylightbox_bal

Demo:

http://www.balupton.com/sandbox/jquery_lightbox/

You just need the scripts and css for it, it will work with your current markup. Of course, get rid of all the Lightbox 2.04 stuff first.

Here's another:

http://leandrovieira.com/projects/jquery/lightbox/

It's just a little more complicated to setup, you need the scripts, css, and images for it, and an added script at the end of the page:

Code:

<script type="text/javascript">
$(function() {
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>

It looks more like the Lightbox you are used to. With it or any script you should probably also get rid of this style:

Code:

A:hover {color: #861D31; font-family: Georgia; font-size: 12pt}

or at least make it more specific to the links it is intended for, so that it doesn't bleed over to the links in the lightbox.

**ambercakes** · 02-07-2009, 04:50 PM

Hello John! Thanks so much for taking the time to help me with this problem. I deleted the style sheet to see if that works & it did not. So, I tried to download the 2nd lightbox you stated but something is wrong with the file when I try to open with winzip.

But, I went ahead & tried the first lightbox stated JQuery by balupton and that totally worked. Yayyyyyyy! Finally I can see the images right.

But the only small thing I would like gone is, when I open one of the images, the lightbox comes up as normal but I do not like the link & words at the top right. I tried to change the show link to false & also tried to change the title & link but to no avail. Also the words under the picture goes to the usual image link, which I do not want. I just want the words under it not the link. Any suggestions on that part? Only if you'd like to or have the time.

I truly appreciate your time John on this matter. You are so kind! Thank you!

**ambercakes** · 02-07-2009, 05:07 PM

Okay John. You'll be glad to know that I got rid of the name & link on the top right when I open the image. I just used this code & erased the other coding that is between the heading:

From:

<script type="text/javascript" src="jquery_lightbox/js/jquery.lightbox.packed.js"></script>

To:

<script type="text/javascript" src="jquery_lightbox/js/jquery.lightbox.packed.js"></script>
<script type="text/javascript">$(function(){
$.Lightbox.construct({
show_linkback: false,
text: {
image: 'Photo'
}
});
});</script>

So, now I am trying to find a way to not link to the actual image link that is under the picture. LOL.

**jscheuer1** · 02-07-2009, 05:57 PM

Originally Posted by ambercakes

I tried to download the 2nd lightbox you stated but something is wrong with the file when I try to open with winzip.

That's funny, I had no problem unzipping that file, and it probably would be better for your page. I don't have winzip though, I use QuickZip, but the native 'compressed (zipped) folders' application that comes with windows doesn't have a problem with it either.

If you can't use 'compressed (zipped) folders' on it, you could try deleting it and downloading a fresh copy, the one you have may have gotten corrupted during download.

I'm a little curious though, why use any lightbox? You are not showing larger versions of the images.

But if you want to stick with what you have, see the instructions:

http://www.balupton.com/sandbox/jque...box/readme.txt

I think what you want is:

Name: download_link
Description: Should we show the image download link?
Values:
true (default) - Yes we should
false - No we shouldn't

You would (I imagine) apply it the same way that you did the other config options:

Code:

		<script type="text/javascript">$(function(){
			$.Lightbox.construct({
				show_linkback:	false,
				download_link:	false,
				text: {
					image:		'Photo'
				}
			});
		});</script>

**ambercakes** · 02-07-2009, 09:13 PM

Thanks John for your help. I could not get the zip file for the other lightbox. But that is okay, I am perfectly fine with using the other one you said. I only have a few images that are bigger to use with the lightbox, but thought it would be professional looking & something different. I did read the readme file for the jquery but thought I had to change the js file but I guess it was in the html file itself. I used the coding you put down but that area was still clickable & it went to a page that said ambercakes.com/undefined. Like I said, this is fine with me. It's just 1 little thing that I can live with. I really thank you for your expertise & time John on this matter. Have a great rest of the wknd!

**jscheuer1** · 02-07-2009, 10:19 PM

That's funny, replacing:

Code:

		<script type="text/javascript">$(function(){
			$.Lightbox.construct({
				show_linkback:	false,
				text: {
					image:		'Photo'
				}
			});
		});</script>

with:

Code:

		<script type="text/javascript">$(function(){
			$.Lightbox.construct({
				show_linkback:	false,
				download_link:	false,
				text: {
					image:		'Photo'
				}
			});
		});</script>

here removes the link in the lightbox captions.

Or where you talking about something else?

**ambercakes** · 02-08-2009, 04:44 AM

John, thanks for your reply. I did change the coding here it is on this page:

http://ambercakes.com/TagGraphicsAwardsTEST.html

But when you click on the words Right click and Save picture as, under the picture when you bring up the lightbox, it will bring up a whole other page to www.ambercakes.com/undefined

Weird! I even changed the coding in the jquery.lightbox.js file to false on lines 520 & 522& saved & refreshed the upload. Here is what it looked like on those lines when I tried that out as well. When I changed them to false on the page then the lightbox went back to default, like I did not change anything at all, not even the extra coding on the html did not work, it seems.

download_link: false, // Display the download link

show_linkback: false, // true, false

I mean the coding you gave above works and got rid of the link line under the words but it now somehow points to an undefined page when you click on the words. I don't get it. But that is okay. This lightbox with the coding you gave is fine with me. It works for me! Thanks.

**jscheuer1** · 02-08-2009, 05:23 AM

I see what you mean now. I didn't even think to click on it, as it didn't appear to be a link. Unless I am mistaken, this appears to be a bug in the script. Regardless, there may be a workaround.