Script Perfect

         Random snips of code and bugs

Easy LightBox With Scriptaculous and Javascript

Posted by Tim On September - 2 - 2009

Lightbox
I searched far and wide to find a basic lightbox that was not only lightweight but easy to install. It was just one of those nice touches I wanted to add to my site but did not want to spend a lot of time doing so. Needless to say I could not find a simple solution so I spent some time and made my own.

This is broken down into a few small and simple sections, first the CSS which we will use to display our lightbox followed by the HTML and Javascript to activate it. In order for this to work correctly you must have script.aculo.us set up on your site.

A working demo may be seen by clicking here.

First we need to set up the CSS for the lightbox, you will have to modify it to suit your needs, this will draw a basic box with a border and allow room in the middle for content. We also create the background div which will encompass the entire screen so that when the lightbox is opened the page behind it will become inactive.

CSS:

#light {
     position: fixed;
     padding:10px;
     width:500px;
     height:300px;
     color:#333;
     background:#E1E1E1;
     z-index: 9981;
}
#lightinner {
     width:480px;
     height:280px;
     padding:10px;
     border:1px solid #000;
     background: #fff;
}
#fade {
     position:fixed;
     left:0;
     top:0;
     padding:0;
     width:100%;
     height:100%;
     color:#333;
     background:#000;
     z-index: 9980;
}

A breakdown of the CSS from above:

  • #light Is a frame for our lightbox with the display set to none so it is not visible when the page loads.
  • #lightinner Is internal to #light and creates the content area for the lightbox.
  • #fade Covers the entire screen with a div so that the user cannot click anywhere except in the lightbox when it is activates.

    • Note: I have set the z-index very high to prevent anything else from appearing over the top of the lightbox.

    Next we move on to the HTML, this is the easiest part and is very simplistic.
    HTML

    <div id="light" style="display:none;">
         <div id="lightinner">This is where your content will go, lets add a link for closing the window:
              <a href="javascript:closeLightBox();">Close LightBox</a>
         </div>
    </div>
    <div id="fade" style="display:none;"></div>
    <a href="javascript:openLightBox();">Open LightBox</a>

    Ok, so we now have our CSS and HTML in place. As you can see the content that you want to appear within the lightbox is contained within the lightinner div. Now we have to make our two Javascript functions which will control the lightbox. The effects will be controlled by script.aculo.us.

    Javascript Functions

    function openLightBox() {
         //set how far from the top of the screen to display the lightbox
         var verticaloffset = 100;
         var element = document.getElementById(‘light’);
         element.style.top =  verticaloffset + ‘px’;
         //Use scriptaculous blind effect to show the lightbox, change effect to what you feel looks best
          new Effect.BlindDown(‘light’);
         //Fade in the background to a 0.7 opacity
         new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.0, to: 0.7});
    }

    function closeLightBox() {
         //Reverse the effects to hide the lightbox
         new Effect.BlindUp(‘light’);
         new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.7, to: 0.0});
    }

    Pretty simple huh? No big buckets of code like most lightboxes, this is simple and lightweight, of course you will have to tweak the css to get the box formatted the way you feel, this is a basic example.

    IMPORTANT: The CSS property position: fixed; is not recognized by IE6 so the lightbox will not function correctly there.

    Well before I go grab my tenth coffee of the day and go into some sort of caffeine shock I will leave you with the complete code for this project.

    COMPLETE CODE

    <html>
           <head>
               <title>LightBox from ScriptPerfect</title>
               <script src="prototype.js" type="text/javascript"></script>
               <script src="scriptaculous.js" type="text/javascript"></script>
               <script type="text/javascript">
                     function openLightBox() {
                         //set how far from the top of the screen to display the lightbox
                        var verticaloffset = 100;
                        var element = document.getElementById(‘light’);
                        element.style.top =  verticaloffset + ‘px’;
                         //Use scriptaculous blind effect to show the lightbox, change effect to what you feel looks best
                        new Effect.BlindDown(‘light’);
                         //Fade in the background to a 0.7 opacity
                        new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.0, to: 0.7});
                     }

                     function closeLightBox() {
                         //Reverse the effects to hide the lightbox
                        new Effect.BlindUp(‘light’);
                        new Effect.toggle(‘fade’, ‘appear’, {duration: 1.0, from: 0.7, to: 0.0});
                    }
                </script>
                <style type="text/css">
                    #light {
                       position: fixed;
                       padding:10px;
                       width:500px;
                       height:300px;
                       color:#333;
                       background:#E1E1E1;
                       z-index: 9981;
                     }
                    #lightinner {
                       width:480px;
                       height:280px;
                       padding:10px;
                       border:1px solid #000;
                       background: #fff;
                    }
                    #fade {
                       position:fixed;
                       left:0;
                       top:0;
                       padding:0;
                       width:100%;
                       height:100%;
                       color:#333;
                       background:#000;
                       z-index: 9980;
                    }
                 </style>
          </head>
          <body>
             <div id="light" style="display:none;">
                  <div id="lightinner">This is where your content will go, lets add a link for closing the window:
                       <a href="javascript:closeLightBox();">Close LightBox</a>
                  </div>
             </div>
              <a href="javascript:openLightBox();">Open LightBox</a>
         </body>
    </html>

    A working demo may be seen by clicking here.

    [del.icio.us] [Digg] [dzone] [Facebook] [Furl] [Google] [LinkedIn] [MySpace] [Newsvine] [Propeller] [Reddit] [Slashdot] [Spurl] [StumbleUpon] [Technorati] [Twitter] [Email] More »
    JavaScript

    2,608 Responses to “Easy LightBox With Scriptaculous and Javascript”

    « Older Comments
    1. Insulating Concrete Forms says:
      January 24, 2012 at 5:02 pm

      Insulating Concrete Forms…

      [...]below you?ll discover the link to some sites that we believe you must visit[...]…

    2. amazon kindle gift card says:
      January 24, 2012 at 9:16 pm

      Coolest news on earth, you have to see this!…

      [...] Are you absolutely convinced that is the right details? I learned something more productive. I’ve basically had another theory that pop right into my head [...]…

    3. link says:
      January 24, 2012 at 9:29 pm

      Cool sites…

      [...] One particular website which I could possibly bring to mind for deeper answers [...]…

    4. free porn says:
      January 24, 2012 at 11:37 pm

      Visitor recommendations…

      [...] we really like to pay tribute to a number of sites on the web, even if they aren’t linked to us, simply by linking to them. Under are some sites really worth checking out [...]…

    5. Tory Burch Shoes Sale says:
      January 25, 2012 at 2:31 am

      greenpeace jobs san diego…

      [...]last October and maintained her unbeaten record [...]…

    6. brain salon review says:
      January 27, 2012 at 7:48 am

      Recent Blogroll Additions……

      [...]usually posts some very interesting stuff like this. If you’re new to this site[...]……

    7. Viemeister Susan S. says:
      February 2, 2012 at 4:33 pm

      Awesome website…

      [...]the time to read or visit the content or sites we have linked to below the[...]……

    8. sonicare flexcare plus says:
      February 3, 2012 at 6:51 pm

      greenpeace australia gifts…

      [...]council employees at Lennox’s final appeal hearing back in September. [...]…

    « Older Comments

    Leave a Reply

    Spam protection by WP Captcha-Free

    About Me

    I am an independent web developer and webmaster of many sites. The main goal of Script Perfect is to provide answers to some of the hard to find questions when it comes to website design and coding.

    Twitter

      Tags

      Ajax apache apc autocomplete blackberry CSS css lightbox database development digg div dugg facebook iPhone JavaScript less conference lightbox login form media mediatemple mobile mod_rewrite multiple domains multiple sites mySQL networking one server PHP privileges progress bar regex rounded corners ruby on rails scriptaculous server social networking speed suggest tutorial twitter upload uploading user viral wamp