| |
25-04-2008, 02:53 PM
| |||
| |||
 Lightbox2 CSS help!! 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> </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!  |
|
25-04-2008, 03:21 PM
| |||
| |||
| try this 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>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="http://forums.techguy.org/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> <p>TEST</p> <p> </p> </body> </html> |
|
25-04-2008, 03:30 PM
| |||
| |||
| Quote:
<!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> </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! |
|
25-04-2008, 04:09 PM
| ||||
| ||||
| 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> Last edited by ButtermilkJack; 25-04-2008 at 05:09 PM. Reason: Corrected ending tag for <img> |
|
25-04-2008, 04:26 PM
| ||||
| ||||
| Quote:
__________________  |
|
25-04-2008, 07:43 PM
| |||
| |||
| Quote:
|
|
26-04-2008, 11:16 AM
| ||||
| ||||
| 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. Last edited by ButtermilkJack; 26-04-2008 at 11:20 AM. Reason: OP edited/deleted previous post |
|
26-04-2008, 12:11 PM
| |||
| |||
| Quote:
Thanks again! - a good first experience posting here!! Last edited by sticker; 26-04-2008 at 12:15 PM. |
|
26-04-2008, 12:32 PM
| |||
| |||
| 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?!! |
 |
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Print view CSS | Goodshape | Coding Help | 7 | 08-01-2008 05:22 PM |
| ie6 css :hover display:block; issue | matt-dublin | Coding Help | 0 | 17-09-2007 09:05 PM |
| dynamic css | 7aken | Coding Help | 6 | 10-10-2006 08:13 AM |
Linear Mode
