• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Lightbox problem


Greg

Active Member
#2
Hi Tim,

Try changing the attribute for that image from rel="lightbox2" to rel="lightbox"

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="http://www.designforums.co.uk/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Greg
PS- Thanks for the linkback to DF :D
 

tim

Senior Member
#3
Hi Greg,

I already tried this, three or four times! It's getting stupid, it just won't accept it!
 

Greg

Active Member
#4
Hi Tim,

I'd follow the instructions to the letter...
In your code you have...
<script src="prototype.js" type="text/javascript"></script><script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
On the Lightbox 2 site instructions it has...
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
See if that makes any difference?
Greg
 

Greg

Active Member
#7
<script type="text/javascript">
//<![CDATA[
document.write('<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />');
//]]>
</script>
Take this out and put with your other CSS references;
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

And lose the rest of that... not sure where that's come from!?
See if that makes any difference...
 

Greg

Active Member
#9
Ahh, your best of checking the main site and following the instructions there...
Lightbox 2

Take a clean download of the js files from that site too, as it looks like you have different versions of the scriptaculous.js file too.
 

Greg

Active Member
#11
Move the lightbox CSS reference upto the line after your hm.css line... atm you have the CSS mixed up with the JS... not sure if that will make a difference but you might as well keep it tidy ;)
 

tim

Senior Member
#12
Nope, no luck at all :(

I tried following the Lightbox 2 instructions but there was nothing different to how you told me to change it.
 

Greg

Active Member
#13
Try this...

This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
 
M

mrleesimpson

Guest
#15
Remove everything that isn't the Lightbox Java, including all non-Lightbox styles, and then get light box working from there.

Once LB is working slowly introduce everything else one element of at a time. Debugging it will save hours of hacking.

Also. Is there a particular reason why you're using this:

<body class="twoColElsRtHdr" onload="MM_preloadImages('_navg5/home2.jpg','_navg5/blog2.jpg','_navg5/contact2.jpg') ;initLightbox()">
For this you should either use pure CSS & SIFR or image sprites where both states are contained in one image and you use the 'background-position:' property to move it about.

Also put this in a stylesheet:

<!--[if IE]>
<style type="text/css">
.twoColElsRtHdr #sidebar1 { padding-top: 30px; }
.twoColElsRtHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]-->
 

tim

Senior Member
#16
if IE tag did nothing at all (even tho it stated it did), so that's gone.

Lightbox still not working. Seperated JS from CSS but still to no avail
 
M

mrleesimpson

Guest
#17
tim-ater said:
if IE tag did nothing at all (even tho it stated it did), so that's gone.
Did you write all the code for the site yourself or is it a mish-mash? Because one missing 'div' or one character out of place could killer the lot.

Try throwing a simple one page up with the Lightbox installed to make sure you're getting all the bits and pieces in the right place.
 

tim

Senior Member
#18
Yeah, that sounds a good thing to do. But no, that code literally does nothing. I took it out and it's the same on IE 6/7 without the IF IE tag
 

Jazajay

Active Member
#19
OK so if the code is right, haven't checked, and it's not working what would you think the problem could possible be?

Think outside of the box here, hummm........ it's like the files cant be accessed or something so the code, therefore, cant execute, that sort of out of the box. :D

Pay attention to ~

www.timmp.co.uk/effects.js
www.timmp.co.uk/builder.js


I would also apply ~

body{line-height:1.3em}


to your main CSS sheet.
That will make the text easier to read by adding space in between the lines.

Let me know if you are still having problems.

Jaz

Key:
Purple ~ CSS