Light Box Tutorial Not Working :-(

http://www.pauserefreshment.co.uk/google_ad_draft.html

Hi from foggy 2 degrees Wakefield UK. Followed this tutorial - http://www.lokeshdhakar.com/projects/lightbox2/#overview but I cant get it to work.

Specifically speaking I was hopping when you rolled over the left hand image of the instant coffee maker the wonderfull lightbox effect would kick in but alas the vagaries of stitching code together has defeated me :frowning:

Now I’m sure the reason it does not work is that the image is wrapped inside a div id=“headbanners”. BUt I’m worried if I start tinkering with the css file I’ll cause myself a bigger problem.

I anyone has an instruction on how to get it to all work without the page structure crashing down like a house of cARDS I’d be very gratefull :slight_smile:

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
body {
background-color:#;
	background-image:url(../images/brand/beans.jpg);
}
#container {
	width: 80%;
	max-width: 1200px;
	min-width: 550px;
	background-color: #fff;
	color: #333;
	border: 1px solid #702453;
	line-height: 130%;
	margin:2% auto;
}
#top {
	padding: .5em;
	background-color: #FFFFFF;
	border-bottom: 0px solid gray;
}
#top h1 {
	padding: 0;
	margin: 0;
}
#top img {
	margin: 0px;
	padding: 0px;
}
#leftnav {
	float: left;
	width: 50%;
	margin: 0;
}
#content {
	margin-left: 50%;
	border-left: 3px solid #622449;
}
#footer {
	clear: both;
	margin: 0;
	padding-bottom: 5px;
	color: #333;
	background-color: #FFFFFF;
	border-top: 3px #702453;
	color:#622449;
	font-weight:bold;
}
#footer .points {
	float: left;
	position: relative;
	margin-bottom:0px;
	padding:0;
}
#footer .utube2 {
	float: right;
	position: relative;
	margin-bottom:0px;
	padding: 0;
}
#content h1 {
	margin: 0 0 0 5px;
	padding-bottom: 3px;
	color:#622449;
}
#leftnav h1 {
	margin: 0 0 0 5px;
	padding: 3px;
	color:#622449;
}
#leftnav h3 {
	margin: 0 0 0 5px;
	padding: 3px;
	color:#B5B43E;
	font-size:30px;
	font-family:Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}

#content h2 {
	padding: 0;
	margin: 0 0 0 5px;
	color:#B5B43E;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	line-height: 1.5em;
}

#leftnav h2 {
	padding: 0;
	margin: 0 0 0 5px;
	color:#B5B43E;
}
#content p {
	padding: 0;
	margin: 0 0 0 15px;
	color:#B5B43E;
}
#leftnav p {
	margin: 0 0 0 15px;
	padding-top: 3px;
	padding-left: 2px;
	color:#622449;
	font-weight:bold;
	padding-bottom:20px;
}
#content p {
	margin: 0 0 0 15px;
	padding-top: 3px;
	padding-left: 2px;
	color:#622449;
	font-weight:bold;
	padding-bottom:20px;
}
a:link {
	color: #622449;
	text-decoration: none
}
a:visited {
	color: #622449;
	text-decoration: none
}
a:hover {
	color: #D68126;
	text-decoration: underline;
	font-size: 100%
}
#header {
	height:125px;
	width:100%;
	background-color:#702453;
}
#header p {
	float:left;
	width:222px;/*need these two*/
	/*left:-2px;Won't work without a positioin*/
margin:0;/*position:absolute;
top:5px;Using floats instead so..*/
}
/* footer2 start */
 	.nav {
	margin:auto;
	border:1px;
	width:100%;
	height:60px;
	background:#B0BB17;
	font:bold 88%/1.1 verdana;
	clear:both;
	overflow:hidden;
}
.nav li {
	float:left;
	list-style:none;
	margin:5px;
	padding-left:15px;
	font-size:large;
	font-family:Arial, Helvetica, sans-serif;
	font-stretch:expanded;
}
.nav li a img {
	margin:0 -5px;
	border:1px inset #66f;
 color:#ffffff  background:;
}
.nav li a {
	float:left;
	padding:0 5px;
	height:50px;
	line-height:50px;
	color:#ddd;
	text-decoration:none;
	text-transform:none;
}
.nav li a:hover {
	margin:-3px;
	border:3px inset #66f;
	color:#ffffff;
 background:;
}
/* footer2 end */

/* footer pic start */
.pics {
	text-align:justify;
	width:100%;
	list-style:none;
	clear:both;
	min-width:820px;
}
.pics li {
	display:inline;
}
.pics li.last {
	margin-right:100%;
}
.pics li a {
	display:-moz-inline-box;
	display:inline-block;
}
/* footer pic end */

#headbanners {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
}
.sector {
	color:#D68126;
	font-weight:bold;
	font-size:1.5em;
	margin:0;
	padding:0;
}
#headbanners p {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
}
#headbanners p img {
	float: left;
	margin-right: 3%;
	width: 75px;
	height: 133px;
	padding-bottom:30px;
	padding-top:7px;
}
#headbanners h2 {
	float: left; /* line up adjacent */
	margin-left: -3px;
	border-left: 0px solid #702453;
	padding: 5px 2%;
	width: 29%; /* (29+2+2=33) */
	padding-top:30px;
	font-size: 1em;
}
#points {
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
	width: 50%;
	float:left;
}
#points p {
	float: left; /* line up adjacent */
	margin-left: 3px;
	border-left: 0px solid #702453;
	padding:1%;
	width: 50%; /* (29+2+2=33) */
	font-size:1.2em;
	margin-top: 0px;
}
#points img {
	float: left;
	margin-right: 3%;
	margin-left:0%;
	width: 75px;
	height: 109px;
}
#points h1 {
	margin: 0 0 0 5px;
	padding: 3px;
	color:#622449;
}
#points h2 {
	padding: 0;
	margin: 0 0 0 15px;
	color:#B5B43E;
}
#hotline {
	clear: both;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	line-height: 1.2;
	overflow: hidden; /* contain the floats */
 font-family:font-family: arial, sans-serif;
	font-size:1em;
}
.callline {
font-family:font-family: arial, sans-serif;
	color:#B5B43E;
	font-size:1.1em;
}
#hotline h1 {
	border-left: 0px solid #702453;
	padding:1%;
	width: 100%;
	font-size: 3em;
	color:#D68126;
	font-family:Arial, Helvetica, sans-serif;
}

#hotline .google {
float:left; 
}

#hotline h2 {
	float: none;
	border-left: 0px solid #702453;
	padding-left:10px;
	font-size: 1.5em;
	padding-top:20px;
	font-family:Arial, Helvetica, sans-serif;
}

#hotline .free {
	float: right;
	margin-right: 3%;
	width: 90px;
	height: 90px;
}
#endfooter {
	clear: both;
	background-color: #white;
	border-top: 0px solid #702453;
	color:grey;
	font-weight:normal;
	line-height: 1.2;
	overflow: hidden; 
}
#endfooter p {
	float: left; 
	margin-left: -3px;
	border-left: 0px solid #B0BB17;
	width: 100%;
	font-size:13px;
	text-align:center;
}

#green {
	margin-left:50%;
}


.column3 {
	float:left;
	clear:none;
	position:relative;
	width:100%;
	overflow:hidden;
	background-color: #fff;
	border-top: 0px solid #702453;
	color:#622449;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

.column3 p {
	margin: 0 0 0 15px;
	padding-top: 3px;
	padding-left: 2px;
	font-weight:bold;
	padding-bottom:20px;
}

.column3 h2 {
	padding-top:15px;
	margin: 0 0 0 15px;
	color:#622449;
}

.column3 h1 {
	margin: 0 0 0 5px;
	padding-bottom:3px;
	padding-top:50px;
	color:#622449;
}


.column3 p img {
	float: left;
	margin-right: 3%;
}

.column3 .phone {
float:right;
}

#content .paddingblast {
	padding:0px;
	margin-left :10px;
	color:#D68126;
	font-family:Arial, Helvetica, sans-serif;
}

#leftnav .paddingblast {
	padding:0px;
	margin-left :10px;
	color:#D68126;
	font-family:Arial, Helvetica, sans-serif;
}
#leftnav img {
	float:left;
}
#content img {
	float:left;
}
.column2 ul {
	padding-left:170px;
}
.column2 ul li {
	margin: 0;
	padding: 2px 0 2px 16px;
	list-style: none;
	background: url('../images/green/tick.jpg') no-repeat top left;
}
.column2 {
	background-color:#FFFFFF;
	border-top:0 solid #702453;
	clear:none;
	color:#622449;
	float:left;
	font-weight:bold;
	overflow:hidden;
	position:relative;
	width:50%;
	margin-left:-1px;
	font-family:Arial, Helvetica, sans-serif;
}
.paddingblast {
	padding:0px;
	margin-left :10px;
	color:#D68126;
	font-family:Arial, Helvetica, sans-serif;
}
.column2 img {
	float:left;
	margin-left:15px;
	display:inline;
	margin-right:3px;
}

#emailUs
{
  display: block;
  width: 100px;
  height: 66px;
  background: url("../images/testimonial/get_quote_2.jpg") no-repeat 0 0;
  margin-left:0px;
  float:left;
}

#emailUs:hover
  { 
    background: url("../images/testimonial/get_quote.jpg") no-repeat 0 0;
  }


#emailUs span
{
  display: none;
}

/* Light Box */
#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; }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="..www/webroot/js/prototype.js"></script>
<script type="text/javascript" src="..www/webroot/js/scriptaculous.js?load=effects,builder"></script>
<script type="..www/webroot/js/text/javascript" src="js/lightbox.js"></script>
<title>UK Office coffee services - rent office coffee service solutions - Call Suzy 01924 363 091 - pause...thoughtful refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/homepage_draft1.css";
</style>
</head>
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
<div id="container">
<div id="hotline">
  <h1>Sell coffee make money</h1>
  <img class="google" alt="Make money sell coffee" src="images/testimonial/businessman_3.jpg" />
  <h2>"When it costs 20p per cup and you sell for £2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail". Mike Parkes - Senior business development manager for pause.</h2>
</div>
<div id="headbanners">
  <p><a href="images/model_instant/vision_large.jpg" rel="lightbox" title="my caption"><img src="images/model_machine/vision_400_2.jpg" alt="Vision 400" /></a><span class="sector">Instant coffee maker</span><br />
    Need to make money from selling  instant coffee? pause refreshment recommends the Vision 400</p>
  <p><img src="images/model_bean/Siena2_1.jpg" alt="franke flair" /><span class="sector">Fresh bean to cup</span><br />
    Need to make money from selling fresh bean to cup coffee pause... refreshment recommends the franke flair coffee machine</p>
  <p><img src="images/model_machine/mondo2_2.jpg" alt="rent coffee machines for your corporation" /><span class="sector">catering coffee machines</span><br />
    Need to make money from selling fresh filter coffee pause recommends the Franke Evolution.</p>
</div>
<div style="clear:both"></div>
<div class="column2">
  <h2>Jet Petrol  choose pause</h2>
  <p class="paddingblast">"pause makes money for big fuel station chain"</p>
  <p><img src="images/testimonial/rob_150_150.jpg" alt="&quot;The i make from coffee is great&quot;" />Jet 2 garages wanted to offer its customers coffee and earn good profit. Pause refreshment won the contract and now supplies Jet 2 garages with a total coffee service solution. "The margin I make on every cup sold is great" Rob Campbell - Area Manager</p>
  <ul>
  </ul>
</div>
<div class="column2">
  <h2>Toni & Guy choose pause</h2>
  <p class="paddingblast">"Prestige hair salon pick pause"</p>
  <p><img src="images/testimonial/toni_guy_black.jpg" alt="Fast rental coffee machine quotes" >Toni & Guy chooses pause... refreshment to supply their salons with a total front of house coffee service. "We'd recommend pause.. refreshment to any business serious about improving front of house hospitality." Rebecca Gill - UK Toni & Guy Business Manager</p>
</div>
<div class="column3">
  <h2>Call 01924 330845 today for a free no obligation consultation</h2>
  <p class="paddingblast">"Lines open 9AM - 5.00PM monday to friday&quot;</p>
  <p><img class="phone" src="images/testimonial/phone_man.jpg" alt="Call David on 01924 330 845" width="134" height="150" />We've got a team of coffee business consultants who know  the secrets behind making money from selling retail coffee. Remember when you rent coffee machine services from pause it only costs you around 20p per cup which means the margin potential is great. The average UK high street cup of coffee for 2010 is around £2. With coffee sales being one of the most resilent markets during hard economic times the risk is minimal and your chance for making money from coffee sales is only a phone call way.</p>
  <h2><a id="emailUs" href="http://www.pauserefreshment.co.uk/talktous.html" target="_blank" title="Email Us"><span>Email Us</span></a>We are never closed to do business. If you need a quote outside office hours or you prefer
    to contact us via eMail then please click on the arrow .</h2>
</div>
<div id="thumnails">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <ul class="nav">
    <li><a href"#">Quote line open during office hours 01924 330 845&nbsp;&nbsp;<a href="http://www.pauserefreshment.co.uk">| &nbsp; www.pause.co.uk</a></li>
  </ul>
  <div id="endfooter">
    <p>&copy; 2009 pause refreshment | Unit 3 128 Thornes Lane | Wakefield | West Yorkshire | WF2 7RE | 01924 363 091 | <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
</div>
</body>
</html>

I notice in the <head> section you have this:

<script type="..www/webroot/js/text/javascript" src="js/lightbox.js"></script>

It should be:

<script type="text/javascript" src="js/lightbox.js"></script>

Can’t guarantee this is the issue but it is the only thing I see.

I also just realized that both of these return a 404:

<script type="text/javascript" src="..www/webroot/js/prototype.js"></script>
<script type="text/javascript" src="..www/webroot/js/scriptaculous.js?load=effects,builder"></script>

I don’t think this is a CSS question Zach, (PS- you have two more JS errors like the ones Ben mentioned)

You might want to ask in the JS forum because they are more familiar with JS then us :wink:

Edit:

Ben beat me :stuck_out_tongue:

Thanks for your replies. Im moving this post over to the javascript section :slight_smile:

http://www.pauserefreshment.co.uk/google_ad_draft.html

Hi from foggy 2 degrees Wakefield UK. Followed this tutorial - http://www.lokeshdhakar.com/projects...box2/#overview but I cant get it to work.

Specifically speaking I was hopping when you rolled over the left hand image of the instant coffee maker the wonderfull lightbox effect would kick in but alas the vagaries of stitching code together has defeated me :frowning:

Now I’m sure the reason it does not work is that the image is wrapped inside a div id=“headbanners”. BUt I’m worried if I start tinkering with the css file I’ll cause myself a bigger problem.

I anyone has an instruction on how to get it to all work without the page structure crashing down like a house of cARDS I’d be very gratefull :slight_smile:



Code:
@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}
body {
background-color:#;
    background-image:url(../images/brand/beans.jpg);
}
#container {
    width: 80&#37;;
    max-width: 1200px;
    min-width: 550px;
    background-color: #fff;
    color: #333;
    border: 1px solid #702453;
    line-height: 130%;
    margin:2% auto;
}
#top {
    padding: .5em;
    background-color: #FFFFFF;
    border-bottom: 0px solid gray;
}
#top h1 {
    padding: 0;
    margin: 0;
}
#top img {
    margin: 0px;
    padding: 0px;
}
#leftnav {
    float: left;
    width: 50%;
    margin: 0;
}
#content {
    margin-left: 50%;
    border-left: 3px solid #622449;
}
#footer {
    clear: both;
    margin: 0;
    padding-bottom: 5px;
    color: #333;
    background-color: #FFFFFF;
    border-top: 3px #702453;
    color:#622449;
    font-weight:bold;
}
#footer .points {
    float: left;
    position: relative;
    margin-bottom:0px;
    padding:0;
}
#footer .utube2 {
    float: right;
    position: relative;
    margin-bottom:0px;
    padding: 0;
}
#content h1 {
    margin: 0 0 0 5px;
    padding-bottom: 3px;
    color:#622449;
}
#leftnav h1 {
    margin: 0 0 0 5px;
    padding: 3px;
    color:#622449;
}
#leftnav h3 {
    margin: 0 0 0 5px;
    padding: 3px;
    color:#B5B43E;
    font-size:30px;
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.5em;
}

#content h2 {
    padding: 0;
    margin: 0 0 0 5px;
    color:#B5B43E;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    line-height: 1.5em;
}

#leftnav h2 {
    padding: 0;
    margin: 0 0 0 5px;
    color:#B5B43E;
}
#content p {
    padding: 0;
    margin: 0 0 0 15px;
    color:#B5B43E;
}
#leftnav p {
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    color:#622449;
    font-weight:bold;
    padding-bottom:20px;
}
#content p {
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    color:#622449;
    font-weight:bold;
    padding-bottom:20px;
}
a:link {
    color: #622449;
    text-decoration: none
}
a:visited {
    color: #622449;
    text-decoration: none
}
a:hover {
    color: #D68126;
    text-decoration: underline;
    font-size: 100%
}
#header {
    height:125px;
    width:100%;
    background-color:#702453;
}
#header p {
    float:left;
    width:222px;/*need these two*/
    /*left:-2px;Won't work without a positioin*/
margin:0;/*position:absolute;
top:5px;Using floats instead so..*/
}
/* footer2 start */
     .nav {
    margin:auto;
    border:1px;
    width:100%;
    height:60px;
    background:#B0BB17;
    font:bold 88%/1.1 verdana;
    clear:both;
    overflow:hidden;
}
.nav li {
    float:left;
    list-style:none;
    margin:5px;
    padding-left:15px;
    font-size:large;
    font-family:Arial, Helvetica, sans-serif;
    font-stretch:expanded;
}
.nav li a img {
    margin:0 -5px;
    border:1px inset #66f;
 color:#ffffff  background:;
}
.nav li a {
    float:left;
    padding:0 5px;
    height:50px;
    line-height:50px;
    color:#ddd;
    text-decoration:none;
    text-transform:none;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ffffff;
 background:;
}
/* footer2 end */

/* footer pic start */
.pics {
    text-align:justify;
    width:100%;
    list-style:none;
    clear:both;
    min-width:820px;
}
.pics li {
    display:inline;
}
.pics li.last {
    margin-right:100%;
}
.pics li a {
    display:-moz-inline-box;
    display:inline-block;
}
/* footer pic end */

#headbanners {
    clear: both;
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    line-height: 1.2;
    overflow: hidden; /* contain the floats */
}
.sector {
    color:#D68126;
    font-weight:bold;
    font-size:1.5em;
    margin:0;
    padding:0;
}
#headbanners p {
    float: left; /* line up adjacent */
    margin-left: -3px;
    border-left: 0px solid #702453;
    padding: 5px 2%;
    width: 29%; /* (29+2+2=33) */
    padding-top:30px;
}
#headbanners p img {
    float: left;
    margin-right: 3%;
    width: 75px;
    height: 133px;
    padding-bottom:30px;
    padding-top:7px;
}
#headbanners h2 {
    float: left; /* line up adjacent */
    margin-left: -3px;
    border-left: 0px solid #702453;
    padding: 5px 2%;
    width: 29%; /* (29+2+2=33) */
    padding-top:30px;
    font-size: 1em;
}
#points {
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    line-height: 1.2;
    overflow: hidden; /* contain the floats */
    width: 50%;
    float:left;
}
#points p {
    float: left; /* line up adjacent */
    margin-left: 3px;
    border-left: 0px solid #702453;
    padding:1%;
    width: 50%; /* (29+2+2=33) */
    font-size:1.2em;
    margin-top: 0px;
}
#points img {
    float: left;
    margin-right: 3%;
    margin-left:0%;
    width: 75px;
    height: 109px;
}
#points h1 {
    margin: 0 0 0 5px;
    padding: 3px;
    color:#622449;
}
#points h2 {
    padding: 0;
    margin: 0 0 0 15px;
    color:#B5B43E;
}
#hotline {
    clear: both;
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    line-height: 1.2;
    overflow: hidden; /* contain the floats */
 font-family:font-family: arial, sans-serif;
    font-size:1em;
}
.callline {
font-family:font-family: arial, sans-serif;
    color:#B5B43E;
    font-size:1.1em;
}
#hotline h1 {
    border-left: 0px solid #702453;
    padding:1%;
    width: 100%;
    font-size: 3em;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
}

#hotline .google {
float:left; 
}

#hotline h2 {
    float: none;
    border-left: 0px solid #702453;
    padding-left:10px;
    font-size: 1.5em;
    padding-top:20px;
    font-family:Arial, Helvetica, sans-serif;
}

#hotline .free {
    float: right;
    margin-right: 3%;
    width: 90px;
    height: 90px;
}
#endfooter {
    clear: both;
    background-color: #white;
    border-top: 0px solid #702453;
    color:grey;
    font-weight:normal;
    line-height: 1.2;
    overflow: hidden; 
}
#endfooter p {
    float: left; 
    margin-left: -3px;
    border-left: 0px solid #B0BB17;
    width: 100%;
    font-size:13px;
    text-align:center;
}

#green {
    margin-left:50%;
}


.column3 {
    float:left;
    clear:none;
    position:relative;
    width:100%;
    overflow:hidden;
    background-color: #fff;
    border-top: 0px solid #702453;
    color:#622449;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}

.column3 p {
    margin: 0 0 0 15px;
    padding-top: 3px;
    padding-left: 2px;
    font-weight:bold;
    padding-bottom:20px;
}

.column3 h2 {
    padding-top:15px;
    margin: 0 0 0 15px;
    color:#622449;
}

.column3 h1 {
    margin: 0 0 0 5px;
    padding-bottom:3px;
    padding-top:50px;
    color:#622449;
}


.column3 p img {
    float: left;
    margin-right: 3%;
}

.column3 .phone {
float:right;
}

#content .paddingblast {
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
}

#leftnav .paddingblast {
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
}
#leftnav img {
    float:left;
}
#content img {
    float:left;
}
.column2 ul {
    padding-left:170px;
}
.column2 ul li {
    margin: 0;
    padding: 2px 0 2px 16px;
    list-style: none;
    background: url('../images/green/tick.jpg') no-repeat top left;
}
.column2 {
    background-color:#FFFFFF;
    border-top:0 solid #702453;
    clear:none;
    color:#622449;
    float:left;
    font-weight:bold;
    overflow:hidden;
    position:relative;
    width:50%;
    margin-left:-1px;
    font-family:Arial, Helvetica, sans-serif;
}
.paddingblast {
    padding:0px;
    margin-left :10px;
    color:#D68126;
    font-family:Arial, Helvetica, sans-serif;
}
.column2 img {
    float:left;
    margin-left:15px;
    display:inline;
    margin-right:3px;
}

#emailUs
{
  display: block;
  width: 100px;
  height: 66px;
  background: url("../images/testimonial/get_quote_2.jpg") no-repeat 0 0;
  margin-left:0px;
  float:left;
}

#emailUs:hover
  { 
    background: url("../images/testimonial/get_quote.jpg") no-repeat 0 0;
  }


#emailUs span
{
  display: none;
}

/* Light Box */
#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; }Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="..www/webroot/js/prototype.js"></script>
<script type="text/javascript" src="..www/webroot/js/scriptaculous.js?load=effects,builder"></script>
<script type="..www/webroot/js/text/javascript" src="js/lightbox.js"></script>
<title>UK Office coffee services - rent office coffee service solutions - Call Suzy 01924 363 091 - pause...thoughtful refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/homepage_draft1.css";
</style>
</head>
<body onload="MM_preloadImages(&#8216;/images/menu_on.gif&#8217;)&#8230;;">
<div id="container">
<div id="hotline">
  <h1>Sell coffee make money</h1>
  <img class="google" alt="Make money sell coffee" src="images/testimonial/businessman_3.jpg" />
  <h2>"When it costs 20p per cup and you sell for &#163;2 per cup its easy to see why selling coffee remains one of the most lucrative business opportunities in retail". Mike Parkes - Senior business development manager for pause.</h2>
</div>
<div id="headbanners">
  <p><a href="images/model_instant/vision_large.jpg" rel="lightbox" title="my caption"><img src="images/model_machine/vision_400_2.jpg" alt="Vision 400" /></a><span class="sector">Instant coffee maker</span><br />
    Need to make money from selling  instant coffee? pause refreshment recommends the Vision 400</p>
  <p><img src="images/model_bean/Siena2_1.jpg" alt="franke flair" /><span class="sector">Fresh bean to cup</span><br />
    Need to make money from selling fresh bean to cup coffee pause... refreshment recommends the franke flair coffee machine</p>
  <p><img src="images/model_machine/mondo2_2.jpg" alt="rent coffee machines for your corporation" /><span class="sector">catering coffee machines</span><br />
    Need to make money from selling fresh filter coffee pause recommends the Franke Evolution.</p>
</div>
<div style="clear:both"></div>
<div class="column2">
  <h2>Jet Petrol  choose pause</h2>
  <p class="paddingblast">"pause makes money for big fuel station chain"</p>
  <p><img src="images/testimonial/rob_150_150.jpg" alt="&quot;The i make from coffee is great&quot;" />Jet 2 garages wanted to offer its customers coffee and earn good profit. Pause refreshment won the contract and now supplies Jet 2 garages with a total coffee service solution. "The margin I make on every cup sold is great" Rob Campbell - Area Manager</p>
  <ul>
  </ul>
</div>
<div class="column2">
  <h2>Toni & Guy choose pause</h2>
  <p class="paddingblast">"Prestige hair salon pick pause"</p>
  <p><img src="images/testimonial/toni_guy_black.jpg" alt="Fast rental coffee machine quotes" >Toni & Guy chooses pause... refreshment to supply their salons with a total front of house coffee service. "We'd recommend pause.. refreshment to any business serious about improving front of house hospitality." Rebecca Gill - UK Toni & Guy Business Manager</p>
</div>
<div class="column3">
  <h2>Call 01924 330845 today for a free no obligation consultation</h2>
  <p class="paddingblast">"Lines open 9AM - 5.00PM monday to friday&quot;</p>
  <p><img class="phone" src="images/testimonial/phone_man.jpg" alt="Call David on 01924 330 845" width="134" height="150" />We've got a team of coffee business consultants who know  the secrets behind making money from selling retail coffee. Remember when you rent coffee machine services from pause it only costs you around 20p per cup which means the margin potential is great. The average UK high street cup of coffee for 2010 is around &#163;2. With coffee sales being one of the most resilent markets during hard economic times the risk is minimal and your chance for making money from coffee sales is only a phone call way.</p>
  <h2><a id="emailUs" href="http://www.pauserefreshment.co.uk/talktous.html" target="_blank" title="Email Us"><span>Email Us</span></a>We are never closed to do business. If you need a quote outside office hours or you prefer
    to contact us via eMail then please click on the arrow .</h2>
</div>
<div id="thumnails">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <ul class="nav">
    <li><a href"#">Quote line open during office hours 01924 330 845&nbsp;&nbsp;<a href="http://www.pauserefreshment.co.uk">| &nbsp; www.pause.co.uk</a></li>
  </ul>
  <div id="endfooter">
    <p>&copy; 2009 pause refreshment | Unit 3 128 Thornes Lane | Wakefield | West Yorkshire | WF2 7RE | 01924 363 091 | <a href="mailto:hello@pause.co.uk">hello@pause.co.uk</a></p>
  </div>
</div>
</body>
</html>

I’ll ask a moderator to move it for you so you don’t have to create a new thread :).

There is no need to at this point as I’m pretty sure that I have already solved the issue of why it is not working. Unless I am missing what you are trying to do there should be no reason to alter the .css file. :slight_smile:

Edit: I notice this is still malformed: <script type=“js/text/javascript” src=“js/lightbox.js”></script>

I copied his code and corrected the file changes and the lightbox still wasn’t working ;).

Though admittedly it does change something, before with wrong file paths, upon clicking the image, it went to the images URI, however with the changed file paths, upon clicking, it did nothing :slight_smile:

So this is indeed a Javascript issue (assuming the HTML is in the correct structure)

Edit:

I guess I copied something wrong

Hi,

If I use this in the head of your page:


<script type="text/javascript" src="http://www.pauserefreshment.co.uk/js/prototype.js"></script>
<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js" type="text/javascript"></script>


The lightbox works straight away (tested locally with your existing page) so you must have copied the wrong files over. Download the last two files (as you can’t link to the lightbox site of course) and try again using the correct details as shown above.

Note that you had this in the script tag also.


<script type=[B]"js/te[/B]xt/javascript" etc....

It should be:


<script type="text/javascript" etc....

Also remove the onload attribute from the body element (as you don’t seem to be pre-loading images anyway) because it will interfere with the script (and the first faq on the lightbox explains this anyway - so check there for more details under Support :)).

Lastly don’t just start a new thread but instead ask an advisor to move it as double posting is frowned upon :slight_smile:

Yes I just down loaded lightbox and changed the links to my local copies and it works here now too.

Thank you so much :slight_smile: Problem fixed. I love sitepoint :slight_smile: :slight_smile: :slight_smile: