...

View Full Version : I’m going nuts! WHAT am I doing wrong with this lightbox script?



Natalie79
09-19-2007, 04:27 PM
((This post is edited since half of the problem has already been fixed))

I found this on dynamicdrive.com: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
I followed the procedures as best I could, in this test page here: http://nataliehijazi.com/Tester/

But I have a problem when trying to view it in firefox:
If you view the page in IE, it looks fine. In firefox, once u click on a thumbnail, the image loads but two things are off:
1)The “previous” and “next” gif buttons that are supposed to appear over the image are not visible.
2)The text below the loaded image and the ‘close’ button have shifted to the left rather than being centered.

I’ve gone over the js and css file but am not sure what to do to make this work right in firefox:
CSS: http://nataliehijazi.com/Tester/CSSJSfiles/css/lightbox.css
JS: http://nataliehijazi.com/Tester/CSSJSfiles/js/lightbox.js

I really, really need this script to work for me, so any help will be GREATLY appreciated.
~Nat

bazz
09-19-2007, 04:38 PM
for me, it works the same in both ie7 and FF; wrongly because it just shows the large image in a new window.

check out the installation instructions in this link, which is also in your js file.

http://huddletogether.com/projects/lightbox2/

I would suggest two things:

firstly, put a DOCTYPE at the start of your webpage and,
secondly, use a relative path to your js files, with no spaces in the filepath.

bazz

_Aerospace_Eng_
09-19-2007, 04:57 PM
Have a look at your code

<script type="text/javascript" src="C:\Documents and Settings\Natalie\My Documents\NatalieHijazi.com V.02\TestersCANDELETE\CSS2\js\prototype.js"></script>
<script type="text/javascript" src="C:\Documents and Settings\Natalie\My Documents\NatalieHijazi.com V.02\TestersCANDELETE\CSS2\js\scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="C:\Documents and Settings\Natalie\My Documents\NatalieHijazi.com V.02\TestersCANDELETE\CSS2\js\lightbox.js"></script>
<link rel="stylesheet" href="C:\Documents and Settings\Natalie\My Documents\NatalieHijazi.com V.02\TestersCANDELETE\CSS2\css\lightbox.css" type="text/css" media="screen" />

See anything wrong?

Natalie79
09-19-2007, 05:52 PM
Have a look at your code...
See anything wrong?

:eek: THANK YOU aerospace! I'm shocked to see that, I would have expected frontpage to convert the links as it uploaded the files. I've changed them and tested the page, and now it works fine, in IE that is; I've tried to use it in FF, everything is fine except for the layout: The text below the loaded image has shifted to the left rather than being in the center and the 'next' and 'previous' buttons are not there. Any suggestions?


As for ur suggestions, bazz, I've already found that page. There was one or two points in there that helped with other issues. But i don't know what a 'doctype' is, i'm sorry guys, but i really don't have any background with html or anything that has to do with webpages and designing them in general :p I just do it for fun in my past time... but am learning.

Anyone who can help wth the FF problem?

_Aerospace_Eng_
09-19-2007, 06:52 PM
The paths to your images to your stylesheet are also incorrect.

Word of advice, stop using Frontpage. There are better editors out there. Also if you are going to attempt web design try to get familiar with the terminology. Don't say "I don't know what that means, sorry, therefore I'm not going to bother using it." If you don't know what something means then research it.

Here is a sticky about doctypes
http://www.codingforums.com/showthread.php?t=18346

garydarling
09-20-2007, 12:56 AM
Open up Lightbox.css and fix the paths to your 'prevlink' and 'nextlink' images.

Gary

garydarling
09-20-2007, 01:00 AM
Here is the css causing your text to center:


#imageData{ padding:0 10px; color: #646146; }
#imageData #imageDetails{ width: 80%; float: center; text-align: center; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 0.3em; }
#imageData #bottomNavClose{float: center; padding-bottom: 0.7em; }

Natalie79
09-20-2007, 07:03 AM
Don't say "I don't know what that means, sorry, therefore I'm not going to bother using it." If you don't know what something means then research it.[/url]

Haha! Beleive me, aerospace, if I ever thought "I won't bother", I wouldn't even be here in the first place, or be just about the only person I know around me who ever bothered to try, that's why I come here to you guys for help, since i'm alone in this. ;)

I also try, try, try and try again when something it not working before I come here looking to bombard you guys with annoying questions! I promise that one :p

Thanks for the further suggestions, everyone, i'll have to try later on in the day.

effpeetee
09-20-2007, 12:26 PM
also try, try, try and try again when something it not working before I come here looking to bombard you guys with annoying questions! I promise that one Your questions are not annoying to most of us. In trying to help you, we also gain from the experience. I just would say (probobly unnecessarily), don't overlook Google. I have often been surprised at what it can find.
Also, I have collected some useful url's at the url below in my signature.

Look forward to hearing from you again.

Frank

Natalie79
09-21-2007, 09:06 AM
Your questions are not annoying to most of us.

Frank

phew! :) that's good, because there'll be a lot more to come! Thanks for the help to everyone here as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum