7 Replies Latest reply on Mar 12, 2010 5:40 AM by osgood_

    Help Please?

    chipsticks09

      Hi All,

       

      I need a little help, I am quite new to designing pages in Dreamweaver and want to add Lightbox 2 to some of my pages in a particular site. I have had this working on seperate test sites but in this one when it's tested the images just open in a seperate window rather than firing up the Lightbox. I have downloaded the relevant files from huddletogether.com and they are placed in the correct place and all links are correct (I beleive, I have checked them many many times!).

      The page in question is based on a Template I created and I have detached the page from the Template to give me greater freedom in placing the script into the head but where ever I place it the same thing happens ie: the Lightbox does not work and the larger image just appears in a new window.

      I really do not know how to fix this and any help and advice would be greatly appreciated, I have been trying everything I can think of for 4 solid days now and am getting to the point of tearing my hair out I am so frustrated.

       

      Please help! The code for the page is copied below;

       

      <!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>Keirone Capstack Illustration</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <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>

      <style type="text/css">
      <!--
      body {
      background-image: url(../images/hmpgbckgrnd/faceright.gif);
      background-repeat: no-repeat;
      }
      #navbar a:link, #navbar a:visited {
      color: #000;
      text-decoration: none;
      background-color: #FFF;
      }
      #navbar a:hover, #navbar a:focus, #navbar a:active {
      color: #EB0023;
      background-color: #FFF;
      }
      #footer ul {
      text-align: center;
      margin: 0px;
      padding: 0px;
      }
      #footer li {
      display: inline;
      }
      -->
      </style>
      <link href="../kcills_styles.css" rel="stylesheet" type="text/css" />
      <!--[if IE 5]>
      <style type="text/css">
      /* place haslayout fix for IE 5* in this conditional comment */
      #mainContent { height: 1%; }
      </style>
      <![endif]-->

      <!--[if IE]>
      <style type="text/css">
      /* place css fixes for all versions of IE in this conditional comment */
      #mainContent { zoom: 1; }
      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
      </style>
      <![endif]-->
      <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" />
      <style type="text/css">
      <!--
      body {
      background-image: url(../images/hmbkgrndrs/escalator.gif);
      background-repeat: no-repeat;
      }
      a:link {
      text-decoration: none;
      color: #FFF;
      }
      a:visited {
      text-decoration: none;
      color: #FFF;
      }
      a:hover {
      text-decoration: none;
      color: #FFF;
      }
      a:active {
      text-decoration: none;
      color: #FFF;
      }
      -->
      </style>
      </head>
      <body>
      <div id="container">
      <div id="header">
        <p><img src="../images/kcills_logo.png" width="356" height="44" alt="Keirone Capstack Illustration" /></p>
        <div class="contactContent">
          <p><a href="../index.htm">www.keironecapstack.com</a></p>
          <p>Contact:</p>
          <p><a href="mailto:mail@keironecapstack.com">mail@keironecapstack.com</a></p>
          <p>Tel: +44 (0) 7989 594 334</p>
        </div>
      </div>
      <div id="sidebar">
        <div id="navbar">
          <ul>
            <li><a href="../illustration/index.htm">illustration</a></li>
            <li><a href="../comics/index.htm">comics</a></li>
            <li><a href="index.htm">kids books</a></li>
            <li><a href="../storyboards/index.htm">storyboards</a></li>
            <li><a href="../animation/index.htm">animation</a></li>
            <li><a href="../character_building/index.htm">character building</a></li>
            <li><a href="../sketches/index.htm">sketches</a></li>
            <li><a href="../prints/index.htm">prints</a></li>
            <li><a href="../contact/index.htm">contact</a></li>
            <li><a href="../terms/index.htm">terms</a></li>
          </ul>
        </div>
      </div>
      <div id="mainContent">
      <p><img src="../images/pagetags/kidsbooks.gif" alt="kids books" width="42" height="226" class="rightimg" /></p>
      <p><a href="../images/kidsbooks1.gif" rel="lightbox"><img src="../images/kidsbooks1_thumbnail.gif" alt="kids books 1" width="173" height="173" border="0" /></a><a href="../images/kibsbooks2.gif" rel="lightbox"><img src="../images/kidsbooks2_thumbnail.gif" alt="kids books 2" width="173" height="173" border="0" /></a><a href="../images/kidsbooks3_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks3_thumbnail.gif" alt="kids books 3" width="173" height="173" border="0" /></a><a href="../images/kidsbooks4.gif" rel="lightbox"><img src="../images/kidsbooks4_thumbnail.gif" alt="kids books 4" width="173" height="173" border="0" /></a><a href="../images/kidsbooks5_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks5_thumbnail.gif" alt="kids books 5" width="173" height="173" border="0" /></a><a href="../images/kidsbooks6.gif" rel="lightbox"><img src="../images/kidsbooks6_thumbnail.gif" alt="kids books 6" width="173" height="173" border="0" /></a><a href="../images/kidsbooks7.gif" rel="lightbox"><img src="../images/kidsbooks7_thumbnail.gif" alt="kids books 7" width="173" height="173" border="0" /></a><a href="../images/kidsbooks8.gif" rel="lightbox"><img src="../images/kidsbooks8_thumbnail.gif" alt="kids books 8" width="173" height="174" border="0" /></a></p>
      </div>
      <br class="clearfloat" />
        <div id="nav">
          <div id="footer">
            <!-- #BeginLibraryItem "/Library/AltNav.lbi" -->
            <ul>
              <li><a href="../illustration/index.htm">Illustration</a></li>
              |
        <li><a href="../comics/index.htm">Comics</a></li>
              |
        <li><a href="index.htm">Kids Books</a></li>
              |
        <li><a href="../storyboards/index.htm">Storyboards</a></li>
              |
        <li><a href="../animation/index.htm">Animation</a></li>
              |
        <li><a href="../character_building/index.htm">Character  Building</a><a href="../sketches/index.htm">| Sketches</a>|</li>
        <li><a href="../prints/index.htm">Prints |</a><a href="../contact/index.htm">Contact</a></li>
              |
        <li><a href="../terms/index.htm">Terms</a></li>
            </ul>
          <!-- #EndLibraryItem --></div>
        </div>
      </div>

      </body>
      </html>

        • 1. Re: Help Please?
          osgood_ Level 8

          A couple of things.

           

          1) you need to change the opening <body> tag to as below

           

          <body onload="initLightbox()">

           

          So in your code this:

           

          </head>
          <body>
          <div id="container">

           

          Should be:

          </head>
          <body onload="initLightbox()">
          <div id="container">

           

           

          Then I would get rid of the additional set of links to the scripts you have. They appear once near the top of the page and then again a bit further down.

           

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

           

           

          Make those changes and see what happens.

          • 2. Re: Help Please?
            chipsticks09 Level 1

            Hey, thanks for the reply. I tried that but the same thing continues

            to happen. My code now looks like this;

             

            <!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>Keirone Capstack Illustration</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <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" />
            <style type="text/css">
            <!--
            body {
            background-image: url(../images/hmpgbckgrnd/faceright.gif);
            background-repeat: no-repeat;
            }
            #navbar a:link, #navbar a:visited {
            color: #000;
            text-decoration: none;
            background-color: #FFF;
            }
            #navbar a:hover, #navbar a:focus, #navbar a:active {
            color: #EB0023;
            background-color: #FFF;
            }
            #footer ul {
            text-align: center;
            margin: 0px;
            padding: 0px;
            }
            #footer li {
            display: inline;
            }
            -->
            </style>
            <link href="../kcills_styles.css" rel="stylesheet" type="text/css" />
            <!--[if IE 5]>
            <style type="text/css">
            /* place haslayout fix for IE 5* in this conditional comment */
            #mainContent { height: 1%; }
            </style>
            <![endif]-->

            <!--[if IE]>
            <style type="text/css">
            /* place css fixes for all versions of IE in this conditional comment */
            #mainContent { zoom: 1; }
            /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
            </style>
            <![endif]-->
            <style type="text/css">
            <!--
            body {
            background-image: url(../images/hmbkgrndrs/escalator.gif);
            background-repeat: no-repeat;
            }
            a:link {
            text-decoration: none;
            color: #FFF;
            }
            a:visited {
            text-decoration: none;
            color: #FFF;
            }
            a:hover {
            text-decoration: none;
            color: #FFF;
            }
            a:active {
            text-decoration: none;
            color: #FFF;
            }
            -->
            </style>
            </head>
            <body onload="initLightbox()">
            <div id="container">
            <div id="header">
              <p><img src="../images/kcills_logo.png" width="356" height="44" alt="Keirone Capstack Illustration" /></p>
              <div class="contactContent">
                <p><a href="../index.htm">www.keironecapstack.com</a></p>
                <p>Contact:</p>
                <p><a href="mailto:mail@keironecapstack.com">mail@keironecapstack.com</a></p>
                <p>Tel: +44 (0) 7989 594 334</p>
              </div>
            </div>
            <div id="sidebar">
              <div id="navbar">
                <ul>
                  <li><a href="../illustration/index.htm">illustration</a></li>
                  <li><a href="../comics/index.htm">comics</a></li>
                  <li><a href="index.htm">kids books</a></li>
                  <li><a href="../storyboards/index.htm">storyboards</a></li>
                  <li><a href="../animation/index.htm">animation</a></li>
                  <li><a href="../character_building/index.htm">character building</a></li>
                  <li><a href="../sketches/index.htm">sketches</a></li>
                  <li><a href="../prints/index.htm">prints</a></li>
                  <li><a href="../contact/index.htm">contact</a></li>
                  <li><a href="../terms/index.htm">terms</a></li>
                </ul>
              </div>
            </div>
            <div id="mainContent">
            <p><img src="../images/pagetags/kidsbooks.gif" alt="kids books" width="42" height="226" class="rightimg" /></p>
            <p><a href="../images/kidsbooks1.gif" rel="lightbox"><img src="../images/kidsbooks1_thumbnail.gif" alt="kids books 1" width="173" height="173" border="0" /></a><a href="../images/kibsbooks2.gif" rel="lightbox"><img src="../images/kidsbooks2_thumbnail.gif" alt="kids books 2" width="173" height="173" border="0" /></a><a href="../images/kidsbooks3_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks3_thumbnail.gif" alt="kids books 3" width="173" height="173" border="0" /></a><a href="../images/kidsbooks4.gif" rel="lightbox"><img src="../images/kidsbooks4_thumbnail.gif" alt="kids books 4" width="173" height="173" border="0" /></a><a href="../images/kidsbooks5_thumbnail.gif" rel="lightbox"><img src="../images/kidsbooks5_thumbnail.gif" alt="kids books 5" width="173" height="173" border="0" /></a><a href="../images/kidsbooks6.gif" rel="lightbox"><img src="../images/kidsbooks6_thumbnail.gif" alt="kids books 6" width="173" height="173" border="0" /></a><a href="../images/kidsbooks7.gif" rel="lightbox"><img src="../images/kidsbooks7_thumbnail.gif" alt="kids books 7" width="173" height="173" border="0" /></a><a href="../images/kidsbooks8.gif" rel="lightbox"><img src="../images/kidsbooks8_thumbnail.gif" alt="kids books 8" width="173" height="174" border="0" /></a></p>
            </div>
            <br class="clearfloat" />
              <div id="nav">
                <div id="footer">
                  <!-- #BeginLibraryItem "/Library/AltNav.lbi" -->
                  <ul>
                    <li><a href="../illustration/index.htm">Illustration</a></li>
                    |
              <li><a href="../comics/index.htm">Comics</a></li>
                    |
              <li><a href="index.htm">Kids Books</a></li>
                    |
              <li><a href="../storyboards/index.htm">Storyboards</a></li>
                    |
              <li><a href="../animation/index.htm">Animation</a></li>
                    |
              <li><a href="../character_building/index.htm">Character  Building</a><a href="../sketches/index.htm">| Sketches</a>|</li>
              <li><a href="../prints/index.htm">Prints |</a><a href="../contact/index.htm">Contact</a></li>
                    |
              <li><a href="../terms/index.htm">Terms</a></li>
                  </ul>
                <!-- #EndLibraryItem --></div>
              </div>
            </div>

            </body>
            </html>

             

            Again any help greatly appreciated!

            • 3. Re: Help Please?
              osgood_ Level 8

              Two more things:

               

              1) You have to include the name of the folder where each image is in the rel="lightbox" code see below:

               

              Your's might be as shown rel="lightbox[images]" or rel="lightbox[../images]"

               

              <a href="../images/kidsbooks1.gif" rel="lightbox[images]"><img src="../images/kidsbooks1_thumbnail.gif" alt="kids books 1" width="173" height="173" border="0" /></a>

               

               

              2) Are you testing this locally i.e. on your computer? If so it may not work until you upload to a server.

               

              I've just tested one of my sites made with lightbox out locally and it did not work until I uploaded to my remote host server.

               

              Forget 2) I just redifined the site and it worked locally

               

              Message was edited by: osgood_

              • 4. Re: Help Please?
                chipsticks09 Level 1

                Thanks again, I have added the ../images

                to each of the rel=Lightbox's, I am just testing

                it locally and it's still not showing the lightbox so I'll upload it and

                see if it works when it's live.

                 

                Thanks again so far... I may be back! God I hope this works!

                • 5. Re: Help Please?
                  osgood_ Level 8

                  chipsticks09 wrote:

                   

                  Thanks again, I have added the ../images

                  to each of the rel=Lightbox's, I am just testing

                  it locally and it's still not showing the lightbox so I'll upload it and

                  see if it works when it's live.

                   

                  Thanks again so far... I may be back! God I hope this works!

                   

                  Upload it and I'll take another look if its not working, provide  a link to the page.

                   

                  There's a better chance of solving the issue if I can get at the complete coding.

                   

                  Might not be today but if you upload and its still not functioning I'll look at it tomorrow.

                  • 6. Re: Help Please?
                    chipsticks09 Level 1

                    Hi, sorry to be so late in getting back to you, I have been trying to upload my site all morning but Dreamweaver keeps telling me an FTP error has occured and connection lost etc. Really frustrating. When I get this up I'll forward you the link as the Lightbox still isn't working when tested locally.

                     

                    Cheers

                     

                    Keirone

                    • 7. Re: Help Please?
                      osgood_ Level 8

                      chipsticks09 wrote:

                       

                      Hi, sorry to be so late in getting back to you, I have been trying to upload my site all morning but Dreamweaver keeps telling me an FTP error has occured and connection lost etc. Really frustrating. When I get this up I'll forward you the link as the Lightbox still isn't working when tested locally.

                       

                      Cheers

                       

                      Keirone

                       

                      Ok no worries. Start a new thread as this one might get burried over the weekend.