Results 1 to 10 of 10

Thread: Lightbox opens up in new window

  1. #1
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox opens up in new window

    1) Script Title: Lightbox

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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.

    Code:
    <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>
    Last edited by jscheuer1; 09-12-2010 at 02:11 PM. Reason: format code

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    The body can't be in the head. You'll also need the files on your server if they're not.

    Code:
    <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.
    Corrections to my coding/thoughts welcome.

  3. #3
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Can you view the .js files as they are linked? If you post a link I can look.
    Corrections to my coding/thoughts welcome.

  5. #5
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    oh. In that case, it's http://www.bdemoss.com/

  8. #8
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.
    Last edited by azoomer; 09-12-2010 at 04:26 PM.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •