Lightbox2 help.

pieplough

pieplough

pieplough

Soldato
Joined
15 Jul 2008
Posts
3,636
Location
Glasgow
As your guessing if someone is asking for help with lightbox2 then they must be new to javascript. I am :D

So my problem is fairly basic i guess. I have got it setup very basic just now.

When you click the image however the loading .gif displays like this..
lightboxprob.jpg


The image is 800x500 and the gif is streched.

Im guessing this is in the lightbox css as ive not altered any of the java files.

Here is lightbox css

Code: 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: 100%; height: 100%;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #FF9934; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Also once image is loaded the next/previous functions dont work.

Id also like the thumbnails to have a hover effect, not sure how.

Any ideas/help gents?

Thanks
 
Make sure you have the correct javascript files between your head tags:

Code: 
<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>

To make the next/previous work, add [name]:

Code: 
<a href="images/image_name.jpg" rel="lightbox[name]" title="your caption">alternative text</a>

You can give it any name you like, just add it to the pictures you would like to group together.
 
Last edited:
TheMagic1an said:
Make sure you have the correct javascript files between your head tags:

Code: 
<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>

To make the next/previous work, add [name]:

Code: 
<a href="images/image_name.jpg" rel="lightbox[name]" title="your caption">alternative text</a>

You can give it any name you like, just add it to the pictures you would like to group together.
Click to expand...

Sound thats the prev/next issue sorted, just not the streched loading .gif

Ive got the correct scripts in the <head> :confused:
 
You must log in or register to reply here.
Back
Top Bottom