Lightbox

castler

New Member
Messages
80
Reaction score
0
Points
0
This may seem like a simple process for anyone else, but I am totally stumped - so I got the gallery started in Dreamweaver and it tests fine, but cannot figure out where to put the css,js and images folder and how to link to those (server side) - I got the official version 2 HERE

Any help is appreciated,
Thanks
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
The files should be uploaded directly into your public_html (or "www", if your software is using the alias name) folder, in the folders they currently live in. So the JavaScript files would go into public_html/js, the css file goes into public_html/css, and the images go into public_html/images.

Linking is done by using server-relative URLs. Server-relative URLs start with a slash, like this:

HTML:
<link rel="stylesheet" href="/css/lightbox.css">

They tell the browser to use the same domain (the same server within the domain, actually) and the same protocol as the page they are processing right now, but to ignore the rest of the page's address. So if you are on your home page:

http://www.example.com

that link will result in the URL:

http://www.example.com/css/lightbox.css

But if you're deep in the structure of the site, say at:

http://www.example.com/photographs/balloons/balloon_gallery_33

it will still result in:

http://www.example.com/css/lightbox.css
 

castler

New Member
Messages
80
Reaction score
0
Points
0
thanks - I uploaded all the folders into their proper directory, I see that via filezilla, there is no css folder so I created the directory and placed that there - on the page I want the photos to appear, I have placed the following code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dixie</title>
<script src="js/jquery-1.7.2.min.js" type="text/wpro"></script>
<script src="js/lightbox.js" type="text/wpro"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body><a href="images/dixie/1-image.jpg" rel="lightbox [a]" title="View into JC Penny 2nd level"><img alt="" src="images/dixie/1-thumb.jpg" height="125" width="188" /></a><a href="images/dixie/2-image.jpg" rel="lightbox [a]" title="View into block B&amp;C"><img alt="" src="images/dixie/2-thumb.jpg" height="125" width="188" /></a><a href="images/dixie/3-image.jpg" rel="lightbox [a]" title="Old Walgreens"><img alt="" src="images/dixie/3-thumb.jpg" height="125" width="188" /></a>
</body>
</html>

The image url is valid, but it does not activate the lightbox script for some reason, just pops up a separate window with the bigger image.
 
Last edited:
Top