11 Replies Latest reply on Feb 5, 2010 7:37 AM by hans-g.

    Lightbox - Help, please.

    rjtyrell

      Hi,

       

      I am trying to use lightbox for our company website, I have inserting the JS and CSS - below:-

       

      <html>
      <head>
      <title>Partitioning - STS Storage Systems</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" href="http://www.stsstorage.co.uk/sts_style.css" type="text/css">
      <meta name="keywords" content="pallet racking, shelving, mezzanine floor, storage equipment, live storage, mobile shelving, container system, solution warehouse, warehouse equipment, racking, archive storage, materials handling">
      <meta name="description" content="STS Storage Systems Specialists in Industrial Storage Systems. Based in Slough, Berkshire, Thames Valley, UK STS supply shelving, racking, archive shelving, warehouse storage and pallet racking to industry and retail warehouses along with other materials handling  and storage equipment. STS also provide consultancy and project design services including the supply of mezzanine floors and flooring, mobile shelving, container systems, cantilever racking and solution warehouse equipment.">
      <SCRIPT LANGUAGE="JavaScript">
      function popUp(URL) {
      day = new Date();
      id = day.getTime();
      eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=1680,height=10 50,left = 0,top = 0');");
      }
      </script>
      <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>

       

      Then I have my image which i think i have tag correctly:-

       

      <img src="../images/small/studtrimsmall.jpg"rel="lightbox"

       

      Yet when I go live nothing happens?

       

      Any help would be very grateful

        • 1. Re: Lightbox - Help, please.
          370H55V Level 4

          Lightbox is kinda finnicky.

          You need to be sure that your lightbox.css and lightbox.js files (where they refer to the loading, prev, next and close images, also have the "../" before the images or those won't load.

           

          Also important is that you have the description and title of the images you want in your lightbox display. And they need an a href to the the full size image:

           

          <a href="images/IMG_0592.jpg" rel="lightbox[barbecue]" title="Quite the crowd."><img src="images/IMG_0592.gif" width="161" height="120" alt="IMG_0592.gif" /></a>

           

          Hope that helps a little.

          Also, it would be really helpful if you have the page up, to provide a link to it so people can see it.

          • 2. Re: Lightbox - Help, please.
            rjtyrell Level 1

            Hi,

             

            Thanks for the reply, my images that came with the downloaded Lightbox file are located in my images folder in my root folder with all the other images to my website.  Is this a problem?

             

            I think I get the rest about -

             

            <a href="images/IMG_0592.jpg" rel="lightbox[barbecue]" title="Quite the crowd."><img src="images/IMG_0592.gif" width="161" height="120" alt="IMG_0592.gif" /></a>

            • 3. Re: Lightbox - Help, please.
              hans-g. Adobe Community Professional & MVP

              Hi,

               

              for easier handling, namely putting the images in the relevant Dreamweaver-folders, I recommend to give "thumbs-" and "final-" pictures in the same folder. Change the titles (names) of the images. For example "picture01small.jpg" and "picture01big.jpg".

               

              Hans-G.

              • 4. Re: Lightbox - Help, please.
                370H55V Level 4

                "I recommend to give "thumbs-" and "final-" pictures in the same folder."

                 

                Or as I've started doing, save the thumb as a gif so that a page full of them loads faster. Also you know the thumbs from the full size because the small ones are gifs and the large ones are jpg.

                • 5. Re: Lightbox - Help, please.
                  hans-g. Adobe Community Professional & MVP

                  Hi,

                   

                  this should be no problem, for simplification I would incorporate the images into the same a unitarily format. By the way, there are plenty of programs with which you can change the features of the images.

                   

                  Hans-G.

                  • 6. Re: Lightbox - Help, please.
                    hans-g. Adobe Community Professional & MVP

                    Hi,

                     

                    and here an example in DW:

                     

                    LBx.jpg

                     

                    Hans-G.

                    • 7. Re: Lightbox - Help, please.
                      rjtyrell Level 1

                      Slowly getting my head around this as a novice, I have started a picture page to try and get Lightbox to work:-

                       

                      http://www.stsstorage.co.uk/docs/example.html

                       

                      But still the image won't open in lightbox, it opens another page that shows the big image.

                       

                      Please help I am stuck :-)

                       

                      html -

                       

                      <!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>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                      <title>Image Gallery</title>
                      <script type="text/javascript" src="file:///C|/Documents and Settings/Richard/Desktop/js/prototype.js"></script>
                      <script type="text/javascript" src="file:///C|/Documents and Settings/Richard/Desktop/js/scriptaculous.js?load=effects,builder"></script>
                      <script type="text/javascript" src="file:///C|/Documents and Settings/Richard/Desktop/js/lightbox.js"></script>
                      <link rel="stylesheet" href="file:///C|/Documents and Settings/Richard/Desktop/css/lightbox.css" type="text/css" media="screen" />
                      </head>

                       

                      <body>
                      <h1>Image gallery<h1>

                       

                      <div id="page">
                      <div id="images">

                        <ul class="gallery">
                       
                      <a href="../images/aplic_palletracking_1_big.jpg" rel="lightbox[racking]">
                      <li><img src="../images/aplic_palletracking_1.jpg" alt="description" /></li>
                      </a>

                       

                      </body>
                      </html>

                      • 8. Re: Lightbox - Help, please.
                        hans-g. Adobe Community Professional & MVP

                        Hi,

                         

                        please look at this page:

                         

                        http://www.lokeshdhakar.com/projects/lightbox2/

                         

                        Here you find a simple cookbook and instructions.

                         

                        Hans-G.

                         

                         

                        P.S.

                        Your / / / / in front of a path point to temporary directories!

                        • 9. Re: Lightbox - Help, please.
                          rjtyrell Level 1

                          Hi Hans-q,

                           

                          One more little one -

                           

                          http://www.stsstorage.co.uk/docs/studpartition.php

                           

                          This now works - expect the close gif doesn't show?

                           

                          I have checked the lightbox.js and the close gif shows at the top

                           

                          Configurationl
                          //
                          LightboxOptions = Object.extend({
                              fileLoadingImage:        'images/loading.gif',    
                              fileBottomNavCloseImage: 'images/closelabel.gif',

                          • 10. Re: Lightbox - Help, please.
                            hans-g. Adobe Community Professional & MVP

                            Hi rjtyrell,

                             

                            congratulation, it looks fine. And on my screen the close-gif appears at the right place at the bottom of the photo. See the enclosed copy of my screen.

                             

                            adScr.jpg

                             

                            Ok?

                             

                            Hans-G.

                             

                            .

                            • 11. Re: Lightbox - Help, please.
                              hans-g. Adobe Community Professional & MVP

                              Hi rjtyrell,

                               

                              here I have a nice completion for you:

                               

                              If it fits the the logic of your composition, you could combine the photos in a single gallery (after that you will see the "nextlabel.gif" in the photos).

                              For that I use a table with the required number of rows and columns and put the small photos (thumbs) in it. After the click you will get displayed the larger ones. The size of my thumbnails is about 100/70 px.

                               

                              Hans-G.