Jump to content

Newbie having a problem with Lightbox2!


Lulu

Recommended Posts

I've set up a test site with just Lightbox2 on it, and gone through the How to step by step(http://lokeshdhakar.com/projects/lightbox2/#how). I set up folders for css and js with all the relevant files in them. These files are showing at the top of my html file and can be opened so I'm assuming that these are all ok. I also set up an images folder which contains the buttons, images etc. lightbox.css is showing a couple of Netscape 8.0 errors, but I don't believe that's relevant. The thumbnails are showing but when I click them in IE9, Firefox etc, nothing happens.

 

Here's the html:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lightbox Test</title>
<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 href="css/lightbox.css" rel="stylesheet"  type="text/css" media="screen" />
</head>

<body>
<p>Single images:</p>
<a href="images/1_b.jpg" rel="lightbox" title="Glasses"><img src="images/1_s.jpg" /></a>
<a href="images/2_b.jpg" rel="lightbox" title="Glasses"><img src="images/2_s.jpg" /></a>
<br />
<br />
<p>Gallery of Images:</p>
<a href="images/1_b.jpg" rel="lightbox[Group1]"><img src="images/1_s.jpg" /></a>
<a href="images/2_b.jpg" rel="lightbox[Group1]"><img src="images/2_s.jpg" /></a>
<a href="images/3_b.jpg" rel="lightbox[Group1]"><img src="images/3_s.jpg" /></a>
</body>

 

 

lightbox.js appears to be referencing the images folder correctly:

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif', 
fileBottomNavCloseImage: 'images/closelabel.gif',

 

 

lightbox.css as the following lines in it, but I'm not sure if they are referencing my local images folder:

#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; }

 

I wondered if everything had to be in a lightbox folder, so I set up another test to try that, but had the same results. Any idea as to what I am doing wrong and how to rectify it?

 

Look forward to hearing from someone.

 

Many thanks.

Link to comment
Share on other sites

I don't suppose you have this uploaded somewhere for us to look at?

 

The only thing I see at the moment is that you don't have a doctype at the top of your html page.

 

 

Thanks for your post, Eddie. I do have doctype, etc at the top, just didn't include it:

 

<!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>

 

Can you see anything obviously wrong with what I've done?

Link to comment
Share on other sites

Not from what I can see which is why I asked if you could upload this to a site so we can see what's going on. More than likely it's probably got to do with file paths maybe for the scripts. I don't know for sure until I can see what you have.

Edited by Eddie
Link to comment
Share on other sites

Not from what I can see which is why I asked if you could upload this to a site so we can see what's going on. More than likely it's probably got to do with file paths maybe for the scripts. I don't know for sure until I can see what you have.

 

Hi, sorry I forgot to answer that bit of your post! I'm only just in the process of setting up a hosting service etc so don't have anywhere to load anything at the moment.

 

All I have done is set up a test 'site' of one page to see if I could get the script to run. What you see in the html is pretty much all there is, apart from the various Lightbox files.

Link to comment
Share on other sites

Hi, sorry I forgot to answer that bit of your post! I'm only just in the process of setting up a hosting service etc so don't have anywhere to load anything at the moment.

 

All I have done is set up a test 'site' of one page to see if I could get the script to run. What you see in the html is pretty much all there is, apart from the various Lightbox files.

Just make sure the path are correct. Out of the box the folder setup is like this:

 

folder-structure.jpg

Link to comment
Share on other sites

Just make sure the path are correct. Out of the box the folder setup is like this:

 

folder-structure.jpg

 

Thanks for your post.

 

I've checked everything against your post, and have all the folders with all the appropriate files in place.

 

Does my html look correct? Any other thoughts as to what I could be doing wrong?

Link to comment
Share on other sites

The code looks fine. Just make sure the images you are trying to use are in the /images/ folder and that the image names matches.

 

One example of your code:

 

<a href="images/1_b.jpg" rel="lightbox" title="Glasses"><img src="images/1_s.jpg" /></a>

 

The following images per the code above should be in your /images/ folder:

 

1_b.jpg

1_s.jpg

 

Check for typos.

 

If that fails, I'd suggest you get this up on your hosted site. Not much we can do when we don't see what's going on. Alternatively you can zip your html page and related files and folders and upload it here so we can download it to review to figure out what's going on.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...