Status
Not open for further replies.

sticker

New Member
I'm tring to figure out Lightbox2 - I understand it's a commonly used bit of software and wondered if anyone here might be able to help me...

homepage Lightbox 2

I don't have a lot of CSS experience, is this the correct place for the script 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="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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<a href="http://forums.techguy.org/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<p>TEST</p>
<p>&nbsp; </p>
</body>
</html>


I've downloaded the lightbox2 files - dumped the contents of the folders into the root directory of the site (css/images/js)

By the by the css file is appearing as a .txt file - ?!

Anyway I've also added the line of code for the image - see above "<a href="http://forums.techguy.org/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>"

The preview in firefox simply shows a hotlink "image #1" which loads the larger image at the bottom of the page - not as it should...

Am I missing anything with the css files that come with the appliation? do I just dump them into the root directory?

Any ideas? - I'd love the get this figured!
 

MickyWall

New Member
try this

Code:
[B] <!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>
[/B][B] <title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
[/B][B] <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>

</head>
 
<body>
<a href="http://forums.techguy.org/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<p>TEST</p>
<p>&nbsp; </p>
</body>
</html>[/B]
 

sticker

New Member
try this

Code:
[B] <!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>
[/B][B] <title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
[/B][B] <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>

</head>
 
<body>
<a href="http://forums.techguy.org/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<p>TEST</p>
<p>&nbsp; </p>
</body>
</html>[/B]

I changed it to my local file and it worked!! (kinda!)

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>

</head>

<body>
<a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<p>TEST</p>
<p>&nbsp; </p>
</body>
</html>

The only problem is on the refreshed web page there still only exists a text link "image #1"

The thumnail for the image is called "thumb-1.jpg"

Do you know how I incorporate the thumbnail into the equation?!!

I'm using Dreamweaver...

Thanks for the prompt reply by the way!
 

ButtermilkJack

New Member
As MickyWall showed, you didn't link to the css file in your code so this is why things didn't work initially. Make sure the path to the css file is correct.

Also, you've left out the code to insert the thumbnail. It should be like this...

<a href="image-1.jpg" rel="lightbox" title="my caption"><img src="thumb-1.jpg" alt="Thumbnail" /></a>
 

sticker

New Member
As MickyWall showed, you didn't link to the css file in your code so this is why things didn't work initially. Make sure the path to the css file is correct.

Also, you've left out the code to insert the thumbnail. It should be like this...

<a href="image-1.jpg" rel="lightbox" title="my caption"><img src="thumb-1.jpg" alt="Thumbnail" /></a>

Thanks!
 

sticker

New Member
IT WORKED!!!!

I didn't place the folders into the root as they are...

THANKS FOR EVERYTHING GUYS - appreciate the help!!!
 

ButtermilkJack

New Member
Yes, you've taken the files out of their folders and placed them in the root. So, now when the document loads and the <head> section looks for "js/lightbox.js" it's not going to find it because you've taken it out of the folder 'js'.

You need to make sure your paths are correct. Either recreate the 3 folders you removed (i.e. "css", "images" & "js") and place the respective files back in, or change the paths in the <head> section to point to where the files are now (i.e. the root).

Personally, I would recreate the folders as it's always better practice to have a clean directory structure, rather than hundreds of files in the root.:)

That should get you going.:)

EDIT: You edited your post at the same time as my reply so this may seem strange to anyone reading it later on. Just a quick tip... In future I wouldn't make wholesale changes to your posts as people will be reading these later on and will lose track of the thread halfway through.
 

sticker

New Member
Yes, you've taken the files out of their folders and placed them in the root. So, now when the document loads and the <head> section looks for "js/lightbox.js" it's not going to find it because you've taken it out of the folder 'js'.

You need to make sure your paths are correct. Either recreate the 3 folders you removed (i.e. "css", "images" & "js") and place the respective files back in, or change the paths in the <head> section to point to where the files are now (i.e. the root).

Personally, I would recreate the folders as it's always better practice to have a clean directory structure, rather than hundreds of files in the root.:)

That should get you going.:)

EDIT: You edited your post at the same time as my reply so this may seem strange to anyone reading it later on. Just a quick tip... In future I wouldn't make wholesale changes to your posts as people will be reading these later on and will lose track of the thread halfway through.

I understand - I figured the problem out as I was posting! - but you're quite right of course!

Thanks again! - a good first experience posting here!!
 

sticker

New Member
Just to close this issue once and for all!!

A final quick question... when I completed the gallery - the thumbnail images in IE & firefox are showing the dreaded blue sourround (hotlink)

Is there any way to remove the blue border?!!
 

sticker

New Member
Hey all,

Sorry to bring this thread back from the dead, but I'm a bit confused!

I've been using lightbox with great success, but my latest news addition to my Club website is not working - it's the three images at the top.

The page already has working lightbox images, but these don't -- all relevant pages are uploaded to the servers...

Code here -

Code:
  <td height="303"><span class="style50"><strong><a href="MauriceBIG.jpg" rel="lightbox" title="One Step Competition"><img src="Mauricesmall.jpg" alt="Thumbnail" border="1" style="border: 0;"/></a></strong></span> </td>
</table></td>
<td width="55"><table width="186" border="1" cellpadding="0" cellspacing="0" bordercolor="#333333" bgcolor="#333333">
<tr>
<td width="182"><span class="style50"><strong><a href="DylanBIG.jpg" rel="lightbox" title="One Step Competition"><img src="Dylansmall.jpg" alt="Thumbnail" border="1" style="border: 0;"/></a></strong></span></td>
</tr>
</table></td>
<td width="216"><table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#333333" bgcolor="#333333">
<tr>
<td><span class="style50"><strong><a href="LydiaBIG.jpg" rel="lightbox" title="One Step Competition"><img src="Lydiasmall.jpg" alt="Thumbnail" border="1" style="border: 0;"/></a></strong></span></td>
  </tr>
</table></td>
I'm sure the cource code will reveal more too - here the url:

AIMAA Ireland - European Headquarters to Cho's Tae Kwon Do
I know the design is not of a high standard - but it's just a hobby at the moment for me...

I don't see where I'm going wrong!

Thanks!
 
Status
Not open for further replies.
Top