Log in

View Full Version : Lightbox opens up in new window


bivy
09-10-2010, 03:10 PM
1) Script Title: Lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: I'm rather new to coding. While I have a book on placement of HTML and CSS code, this problem I can't seem to figure out. I have tested it offline and the Lightbox application works just fine. When I upload it through the FTP and get it online, the Lightbox is broken. It opens up the image in a new page and you have to hit the "back" button on your browser to get back to the site's main page. I've tested it in Google Chrome and IE (not sure which version) and I have the same problem. Is there an issue in the coding or the file permissions when I upload it?

Here is the header coding in case I missed something. Thanks bunches for any help you can give me.


<head>
<title> Bev "Ivy" DeMoss </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
background-image: url(images/texture_4.png);
background-repeat: repeat;
}

p#nav{text-align:center;}
p#ban{text-align:center;}



#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }



#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}


<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">









-->
</style>

<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" />
</head>
bluewalrus
09-10-2010, 03:22 PM
The body can't be in the head. You'll also need the files on your server if they're not.



<head>
<title> Bev "Ivy" DeMoss </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
background-image: url(images/texture_4.png);
background-repeat: repeat;
}

p#nav{text-align:center;}
p#ban{text-align:center;}

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

-->
</style>

<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" />
</head>

<body onload="MM_preloadImages('/images/menu_on.gif')…;initLightbox()">

I'm also assuming the this line "MM_preloadImages('/images/menu_on.gif')…;initLightbox()" works. I changed the quotes from the microsoft ones to the regular single ones, you should make sure you use those as well.
bivy
09-10-2010, 03:37 PM
Unfortunately, even with the correction, this is still not working when I take it online. Is there perhaps a certain setting on the file permissions through the FTP I need to make Lightbox work?

Oh and thanks for being so prompt. I've been struggling with this for a while and it will be nice to finally get it done correctly.
bluewalrus
09-10-2010, 05:02 PM
Can you view the .js files as they are linked? If you post a link I can look.
bivy
09-11-2010, 04:44 PM
I'm not quite sure what you are asking for "as they are linked" but I have in the "js" folder on the server builder.js, effects.js, lightbox.js, prototype.js, and scriptaculous.js. In that order, as titled.

Is there something I should be including in the code of the index page (other than what's in the header that I've previously posted) that would link to those files in particular?
jscheuer1
09-12-2010, 02:12 PM
Please post a link to a page on your site that contains the problematic code so we can check it out.
bivy
09-12-2010, 03:16 PM
oh. In that case, it's http://www.bdemoss.com/ (http://www.bdemoss.com/)
azoomer
09-12-2010, 04:21 PM
Your javascript files are not to be found on the location linked to.
For example
http://www.bdemoss.com/js/prototype.js
leads to an error page,
Well forbidden it says, so you may also want to see what the permissons are on the js folder.
jscheuer1
09-12-2010, 04:35 PM
Your external scripts are all 403 Forbidden, so are not loading. This means that the permissions set on the folder they are in (js) and/or the files themselves are such that they don't permit web access. This is usually controlled in the ftp program. Folders should be drwxrwxr-x (chmod 775) and files -rw-r--r-- (chmod 664). These are minimum values for web access that still permit you to upload and change the files from ftp or other programs for this purpose.

As the methods for doing this vary widely depending upon your ftp program, and there are other interfaces for it in advanced editors and host provided interfaces, if you are in the dark about this, ask your host how to set the permissions on these files and folders so that they may be accessed from the browser.

There could also be other problems. Here:


<body onload="MM_preloadImages('/images/menu_on.gif')…;initLightbox()">
<body bgcolor="#336666">

Highlighted and red is an illegal character, and you are only allowed one body tag. The version of lightbox you are attempting to use doesn't require an init in the body tag, it has its own non-conflicting init in the lightbox.js script. So to preserve the intent of those two tags, remove them both and use:


<body bgcolor="#336666" onload="MM_preloadImages('/images/menu_on.gif');">

Once the body tag is cleared up and access to these scripts are set properly for web access, assuming they are the right scripts, it will probably work, sort of. I see though that css/lightbox.css is a 404 Not Found. This will need to be present and accessible as well unless the on page styles are sufficient, which I believe they may not be.
bivy
09-12-2010, 05:36 PM
Oh wow, You guys are amazing!! Thanks very much for the assistance and spelling out everything to a simpleton when it comes to coding.

I really, really appreciate it. I've spent far too long combing over this coding and couldn't find why it was working offline and not online. Thanks again.
:D