Lightbox problem

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
 
Hi Greg,

I already tried this, three or four times! It's getting stupid, it just won't accept it!
 
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
 
<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...
 
sorry about this! I didn't take Lightbox2 off the site itself, I tried robbing it off someone.
 
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.
 
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 ;)
 
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.
 
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()">
 
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]-->
 
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
 
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.
 
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
 
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
 
Back
Top