Lightboxes

[mrkidd85]

HiI have tried using light boxes to give my photos the zoom affect, but currently I am not having any luck. Here is the code that I have used.CSS

/*Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License*/body {background: #000000;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 11px;color: #E7E7E7;}h1, h2, h3 {margin: 0;padding: 0;font-family: Georgia, "Times New Roman", Times, serif;color: #FFFFFF;}h1 { font-size: 34px; }h2 {margin-bottom: 10px;padding: 0 0 22px 0;font-size: 24px;background: #000000 url(images/img3.gif) repeat-x left bottom;}h3 {padding: 0 0 22px 0;font-size: 13px;background: #000000 url(images/img3.gif) repeat-x left bottom;}#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #fff; 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; }p {margin-top: 0;text-align: justify;line-height: 160%;}ul.cssMenu ul{display:none}ul.cssMenu li:hover>ul{display:block}ul.cssMenu ul{position: absolute;left:-1px;top:98%;}ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}ul.cssMenu,ul.cssMenu ul {margin:0px;list-style:none;padding:0px 2px 2px 0px;background-color:#000000;background-repeat:repeat;border-color:#cccccc #111111 #111111 #cccccc;border-width:1px;border-style:solid;}ul.cssMenu table {border-collapse:collapse}ul.cssMenu {display:block;zoom:1;float: left;}ul.cssMenu ul{width:155.4px;}ul.cssMenu li{display:block;margin:2px 0px 0px 2px;font-size:0px;}ul.cssMenu a:active, ul.cssMenu a:focus {outline-style:none;}ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {display:block;vertical-align:middle;background-color:#000000;border-width:1px;border-color:#000000;border-style:solid;text-align:left;text-decoration:none;padding:2px 5px 2px 10px;_padding-left:0;font:14px Arial;color: #FFFFFF;text-decoration:none;cursor:default;}ul.cssMenu span{overflow:hidden;}ul.cssMenu li {float:left;}ul.cssMenu ul li {float:none;}ul.cssMenu ul a {text-align:left;white-space:nowrap;}ul.cssMenu li.sep{text-align:left;padding:0px;line-height:0;height:100%;}ul.cssMenu li.sep span{float:none; padding-right:0;width:0px;height:100%;display:inline-block;background-color:#cccccc #111111 #111111 #cccccc; background-image:none;}ul.cssMenu ul li.sep span{width:100%;height:3px;}ul.cssMenu li:hover{position:relative;}ul.cssMenu li:hover>a{background-color:#00ff00;border-color:#000000;border-style:solid;font:14px Arial;color: #FFFFFF;text-decoration:none;}ul.cssMenu li a:hover{position:relative;background-color:#00ff00;border-color:#000000;border-style:solid;font:14px Arial;color: #FFFFFF;text-decoration:none;}ul.cssMenu li.dis a {color: #666 !important;}ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;height:16px;}ul.cssMenu ul img {width:16px;height:16px;}ul.cssMenu img.over{display:none}ul.cssMenu li.dis a:hover img.over{display:none !important}ul.cssMenu li.dis a:hover img.def {display:inline !important}ul.cssMenu li:hover > a img.def {display:none}ul.cssMenu li:hover > a img.over {display:inline}ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}ul.cssMenu span{display:block;background-image:url(./images/arr_white.gif);background-position:right center;background-repeat: no-repeat;padding-right:12px;}ul.cssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);}ul.cssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)}ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(./images/arr_white.gif)}a {color: #Ffffff;}a:hover {text-decoration: underline;}.list {margin: 0;padding: 0;list-style: none;}.list li {padding: 5px 0;background: url(images/img5.gif) repeat-x;}.list li.first {background: none;}/* Header */#header {width: 850px;margin: 0 auto;padding: 40px 0 0 13px;height: 90px;background: url(images/img1.gif) repeat-x left bottom;}#header h1 {float: left;}#header h2 {display: none;}#header ul {float: right;margin: 0;padding: 15px 0 0 0;list-style: none;}#header li {display: inline;}#header a {display: block;float: left;padding: 0 14px 0 20px;background: url(images/img2.gif) no-repeat left center;text-decoration: none;color: #FFFFFF;}#header a:hover {text-decoration: underline;}#header .first a {background: none;}/* Content */#content {width: 850px;margin: 0 auto;}#colTwo {float: left;width: 394px;padding: 10px 10px 10px 10px;border:1px dotted #00ff00;}#colone {float: left;width: 394px;padding: 10px 10px 10px 10px;border:1px dotted #00ff00;}#colfour {float: left;width: 750px;padding: 10px 10px 10px 10pxborder:1px dotted #00ff00;}/* Footer */#footer {clear: both;width: 694px;margin: 0 auto;padding: 30px 0 0 0;}#footer p {padding: 20px 0 0 0;background: url(images/img4.gif) repeat-x;text-align: center;color: #8A8A8A;}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License--><html xmlns="http://www.w3.org/1999/xhtml"><head><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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>McCarthy (Contractors) SW Limited</title><meta content="Render, Plaster, Builder, South West, Contractors, Devon, " name="keywords" /><meta content="Contractors" name="description" /><link href="default.css" rel="stylesheet" type="text/css" /><style type="text/css">.style1 { font-size: xx-large; font-family: Arial, Helvetica, sans-serif; margin-top: 0;}.style2 { text-align: center;}body *{line-height:1.22em}.style9 { color: #00FF00;}.style11 { font-family: Eurostile;}.style13 { color: #FF0000; font-size: medium;}a { color: #FFFFFF;}a:visited { color: #FFFFFF;}a:active { color: #FFFFFF;}a:hover { color: #FFFFFF;}.style16 { margin-bottom: 0;}.style17 { text-align: center; font-size: small;}.style18 { color: #FFFFFF; font-size: medium; font-family: Arial, Helvetica, sans-serif;}.style20 { text-decoration: none;}</style></head><body><div id="header" style="width: 835px" class="style16"> <h1 style="width: 365px; height: 89px" class="style1"><span class="style9">Mc</span>Carthy (Contractors) <span class="style1">SW Limited</span></h1> <h2 class="style11">Menu</h2> <ul class="cssMenu cssMenum"> <li class=" cssMenui"><a href="index.html">Home</a></li> <li class=" cssMenui"><a class=" cssMenui" href="#"><span>Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="external.html">External</a></li> <li class=" cssMenui"><a class=" cssMenui" href="throughcolour.html">Through Colour Renders</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=" cssMenui"><a class=" cssMenui" href="products.html">Products</a></li> <li class=" cssMenui"><a class=" cssMenui" href="#"><span>Contact</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="contactus.html">Contact Details</a></li> <li class=" cssMenui"><a class=" cssMenui" href="enquiry.html">General Enquiry</a></li> <li class=" cssMenui"><a class=" cssMenui" href="subenq.html">Subcontractor Enquiry</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div><div id="content"> <h3 class="style2"> <img alt="" height="245" src="img16.jpg" width="849" /></h3> <div id="colTwo" style="width: 260px; height: 325px;" class="style23"> <strong> <span class="style13">Company Projects<br /> </span> </strong> <span class="style18"><a class="style20" href="wilson.html">David WIlson Homes</a><br /> <a class="style20" href="gloss.html"target="_blank">Glossbrook</a><br /> <a class="style20" href="linden.html"target="_blank">Linden Homes</a><br /> <a class="style20" href="mcalpine.html"target="_blank">Sir Robert McAlpine</a><br /> <a class="style20" href="midas.html"target="_blank">Midas Construction</a><br /> <a class="style20" href="morgan.html"target="_blank">Morgan Ashurst</a><br /> <a class="style20" href="paulcompton.html"target="_blank">Paul Compton</a><br /> <a class="style20" href="premier.html"target="_blank">Premier Construction</a><br /> <a class="style20" href="marine.html"target="_blank">Marine Palms</a></span></div> <div id="colone" style="width: 545px; height: 325px;"> <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>  </div> <div id="colfour" style="width: 848px; height: 96px;">  <br /> <!-- HTML codes by Quackit.com --><marquee behavior="scroll" direction="left"><img src="images/bellway.jpg" width="100" height="75"/><a> </a><img src="images/bam.jpg" width="100" height="75"/><a> </a><img src="images/bloor.jpg" width="100" height="75"/><a> </a><img src="images/bluestone.jpg" width="100" height="75"/><a> </a><img src="images/bourntex.jpg" width="100" height="75"/><a> </a><img src="images/churchill.jpg" width="100" height="75"/><a> </a><img src="images/costain.jpg" width="100" height="75"/><a> </a><img src="images/crest.jpg" width="100" height="75"/><a> </a><img src="images/ecotrust.jpg" width="100" height="75"/><a> </a><img src="images/jarvis.jpg" width="100" height="75"/><a> </a><img src="images/kier.jpg" width="100" height="75"/><a> </a><img src="images/leadbitter.jpg" width="100" height="75"/><a> </a><img src="images/linden.jpg" width="100" height="75"/><a> </a><img src="images/mansell.jpg" width="100" height="75"/><a> </a><img src="images/mcstone.jpg" width="100" height="75"/><a> </a><img src="images/midas-group.jpg" width="100" height="75"/><a> </a><img src="images/morgan.jpg" width="100" height="75"/><a> </a><img src="images/pearce.jpg" width="100" height="75"/><a> </a><img src="images/pollard.jpg" width="100" height="75"/><a> </a><img src="images/rok.jpg" width="100" height="75"/><a> </a><img src="images/sirrobert.jpg" width="100" height="75"/><a> </a><img src="images/tw.jpg" width="100" height="75"/><a> </a></marquee><p class="style17"> Some of the companies we have worked for</p> </div></div><div id="footer" style="width: 848px; height: 57px;"> <p class="style2">Copyright © 2009 McCarthy</p> <br></div></body></html>

What am I doing wrong?the link isHerePlease can someone explain what I have done wrong with the coding, as once I have finished here, I am almost finished with the site.

[roundcorners]

all your pathnames seem to be wrong, they adon't correctly refer to the resource.Also, put an image between the <a> tags to display an image that will open a larger one.And where are you linking to the lightbox.js file?

[mrkidd85]

all your pathnames seem to be wrong, they adon't correctly refer to the resource.Also, put an image between the <a> tags to display an image that will open a larger one.And where are you linking to the lightbox.js file?

Thanks, but can you perhaps explain what you mean by all the pathnames seem to be wrong?I am fairly new to this. I don't really understand what you mean by were are you linking the lightbox.js file either. Can you please tell me what you mean in simpler terms.

[mrkidd85]

Thanks, but can you perhaps explain what you mean by all the pathnames seem to be wrong?I am fairly new to this. I don't really understand what you mean by were are you linking the lightbox.js file either. Can you please tell me what you mean in simpler terms.

I have now uploaded all the Javascript files but it's still not working.Please can somebody explain what is going wrong/~>?

[justsomeguy]

The paths don't necessarily look wrong, are you checking for Javascript error messages? It would probably be easiest to use Firefox with Firebug to help debug this.

[mrkidd85]

The paths don't necessarily look wrong, are you checking for Javascript error messages? It would probably be easiest to use Firefox with Firebug to help debug this.

I'm sorry, the tutorial didn't mention anything about firebug. What is it?

[justsomeguy]

It's a debugging tool for Firefox, there's a link to it in my signature. It typically gives better Javascript error messages than normal and has several other tools to inspect the page to figure out what's going on. If things aren't working though a debugger should be the first step, it's hard to fix the errors without knowing what the problem is.

[mrkidd85]

I downloaded the IE debugger, and I have made a seperate page so I can concentrate on just the lightbox.Here is the updated pageThe script is as follows.CSS

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #fff; 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; }

HTML

<html><head><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><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><body><a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg"</a><a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg"</a><a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg"</a><a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg"</a></body></html>

You'll see what it is coming up like.Please can someone help me I've been stuck on this all day. An error message pops up from the debugger but it is just jibberish to me.Please.PleasePlease help me.

[justsomeguy]

It's not able to find the lightbox.css file, which may be the only problem, I'm not seeing any Javascript errors with Firebug. I do see a lot of crap that Angelfire put on the page though, that stuff may be interfering. If possible, test this on a server that's not going to modify your code. Angelfire modifies your code to add their own ads.

[real_illusions]

Lightbox also requires a javascript library such as Jquery or Mootools, and I dont see one been referenced in the code.

[mrkidd85]

I have sorted this now,Thanks for the help.