PDA

View Full Version : Lightbox 2 not working on this site, have it working in others


chipsticks09
03-11-2010, 04:39 PM
Hi, this I am having a problem getting the Lightbox 2 to work on one of my sites. I have it working on a couple of test sites but when I try to get it going on this site all that happens when a thumbnail image is clicked is the larger image shows but on a new page rather than firing up the lightbox. My code is below, the lightbox downloaded files are in my root folder, I already had an images folder so took the files from their image folder that is downloaded and placed them in mine (not with the actual image folder obviously) this should not matter should it?

Here's my 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>
<title>Keirone Capstack Illustration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(../images/hmpgbckgrnd/faceright.gif);
background-repeat: no-repeat;
}
#navbar a:link, #navbar a:visited {
color: #000;
text-decoration: none;
background-color: #FFF;
}
#navbar a:hover, #navbar a:focus, #navbar a:active {
color: #EB0023;
background-color: #FFF;
}
#footer ul {
text-align: center;
margin: 0px;
padding: 0px;
}
#footer li {
display: inline;
}
-->
</style>
<link href="../kcills_styles.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place haslayout fix for IE 5* in this conditional comment */
#mainContent { height: 1%; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-image: url(../images/hmbkgrndrs/escalator.gif);
background-repeat: no-repeat;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
-->
</style>
</head>
<body onload="initLightbox()">
<div id="container">
<div id="header">
<p><img src="../images/kcills_logo.png" width="356" height="44" alt="Keirone Capstack Illustration" /></p>
<div class="contactContent">
<p><a href="../index.htm">www.keironecapstack.com</a></p>
<p>Contact:</p>
<p><a href="mailto:mail@keironecapstack.com">mail@keironecapstack.com</a></p (mail@keironecapstack.com%22%3Email@keironecapstac k.com%3C/a%3E%3C/p)>
<p>Tel: +44 (0) 7989 594 334</p>
</div>
</div>
<div id="sidebar">
<div id="navbar">
<ul>
<li><a href="../illustration/index.htm">illustration</a></li>
<li><a href="../comics/index.htm">comics</a></li>
<li><a href="index.htm">kids books</a></li>
<li><a href="../storyboards/index.htm">storyboards</a></li>
<li><a href="../animation/index.htm">animation</a></li>
<li><a href="../character_building/index.htm">character building</a></li>
<li><a href="../sketches/index.htm">sketches</a></li>
<li><a href="../prints/index.htm">prints</a></li>
<li><a href="../contact/index.htm">contact</a></li>
<li><a href="../terms/index.htm">terms</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<p><img src="../images/pagetags/kidsbooks.gif" alt="kids books" width="42" height="226" class="rightimg" /></p>
<p><a href="../images/kidsbooks1.gif" rel="lightbox"><img src="../images/kidsbooks1_thumbnail.gif" alt="kids books 1" width="173" height="173" border="0" /></a><a href="../images/kibsbooks2.gif" rel="lightbox"><img src="../images/kidsbooks2_thumbnail.gif" alt="kids books 2" width="173" height="173" border="0" /></a><a href="../images/kidsbooks3_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks3_thumbnail.gif" alt="kids books 3" width="173" height="173" border="0" /></a><a href="../images/kidsbooks4.gif" rel="lightbox"><img src="../images/kidsbooks4_thumbnail.gif" alt="kids books 4" width="173" height="173" border="0" /></a><a href="../images/kidsbooks5_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks5_thumbnail.gif" alt="kids books 5" width="173" height="173" border="0" /></a><a href="../images/kidsbooks6.gif" rel="lightbox"><img src="../images/kidsbooks6_thumbnail.gif" alt="kids books 6" width="173" height="173" border="0" /></a><a href="../images/kidsbooks7.gif" rel="lightbox"><img src="../images/kidsbooks7_thumbnail.gif" alt="kids books 7" width="173" height="173" border="0" /></a><a href="../images/kidsbooks8.gif" rel="lightbox"><img src="../images/kidsbooks8_thumbnail.gif" alt="kids books 8" width="173" height="174" border="0" /></a></p>
</div>
<br class="clearfloat" />
<div id="nav">
<div id="footer">
<!-- #BeginLibraryItem "/Library/AltNav.lbi" -->
<ul>
<li><a href="../illustration/index.htm">Illustration</a></li>
|
<li><a href="../comics/index.htm">Comics</a></li>
|
<li><a href="index.htm">Kids Books</a></li>
|
<li><a href="../storyboards/index.htm">Storyboards</a></li>
|
<li><a href="../animation/index.htm">Animation</a></li>
|
<li><a href="../character_building/index.htm">Character Building</a><a href="../sketches/index.htm">| Sketches</a>|</li>
<li><a href="../prints/index.htm">Prints |</a><a href="../contact/index.htm">Contact</a></li>
|
<li><a href="../terms/index.htm">Terms</a></li>
</ul>
<!-- #EndLibraryItem --></div>
</div>
</div>
</body>
</html>



I am quite new to this but a quick learner, please help I have been trying to figure out why this isn't working for about 3 days solid and my head is about to explode!!!

Corrosive
03-11-2010, 06:04 PM
OK, checklist;

1. The lightbox javascipt files are in a folder in the root of your site called 'js'
2. The lightbox.css file is in your 'css' folder?
3. Have you changed the paths to any images (which you have said you have moved) in both the lightbox.css and lightbox.js files as shown on the Lightbox2 website?
4. Check all your paths by clicking the links in a live environment (view > source in your browser) and making sure you end up with the file you want.

If all those are done then link to your site so we can check a bit more.

chipsticks09
03-12-2010, 01:05 PM
Hi Corrosive,

Thanks for getting back to me, in answer to your checklist;

1. Yep lightbox Javascript files are in js folder in root.
2. Yep CSS files are in CSS folder which is also in root.
3. No paths have changed, I just took all the images from their images file and placed them in mine - spelt exactly the same and agian in root.
4. all images link to the correct images.

I have been trying to upload my site all morning but really annoyingly I keep getting connection lost and FTP error occured messages coming up. I have been trying all different things but just does not seem to want to play ball as yet.

When I get the site up I'll post a link.

Thanks again for getting back to me.

Corrosive
03-12-2010, 05:21 PM
When I get the site up I'll post a link.



Yes, that would be good otherwise we are in to 'wild guessing' territory.

chipsticks09
03-18-2010, 01:00 PM
Right have finally got the site up, still the lightbox won't work. If you could take a look it would be much appreciated. Lightbox on the following pages:

http://www.keironecapstack.com/illustration/index.htm

http://www.keironecapstack.com/comics/index.htm

http://www.keironecapstack.com/kids_books/index.htm

d a v e
03-18-2010, 01:22 PM
maybe the problem is that you're using
rel="lightbox[../images]

instead f rel="lightbox[images]
the bit in square brackets huosl just be a simple name like [gallery], [portraits] etc try that and see if it works

chipsticks09
03-18-2010, 10:31 PM
Hey thanks for replying, but no it does not work. I had them that way at first but as Dreamweaver was pointing all my other images that way - ../images I thought that might be why and changed them. I just tried changing them back again as you sugested and got rid of the ../ in the brackets just in case... But it still won't work.

gentleone
03-18-2010, 11:21 PM
All your JavaScript and CSS links in the head are not right. Now you linking to the the 'js' and 'css' folders in your 'illustration' folder, but they're not there... they're in your root, so you have to link to your root with: ../

You have:

<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
This should be:

<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>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

chipsticks09
03-18-2010, 11:35 PM
You are absolutely correct. Thanks, it's working! and tonight I can sleep. Thanks again

Corrosive
03-19-2010, 07:48 AM
You could have saved yourself days if you'd followed my checklist carefully...


4. Check all your paths by clicking the links in a live environment (view > source in your browser) and making sure you end up with the file you want.



Oh well, glad it is sorted :)

chipsticks09
03-19-2010, 09:53 AM
Good point, I'll be more carefull in the future, still quite new to this. Thanks again, you're a life saver.

Corrosive
03-19-2010, 10:02 AM
You live, you learn ;) Glad it is all working now anyway.