INTRODUCTION

NlsLightBox is lightweight and powerful cross browser lightbox control. NlsLightBox offers more than most lightbox controls available in the market. It supports viewing predefined collection of images, zoom, resize and fade effect. In addition to preview image, NlsLighbox also provide functionality to load HTML content using AJAX, IFRAME or inline content. These are functionalities that will greatly enhance your web solution. Replace the old popup window with more sophisticated lightbox to bring more advance user interface experience in your web solution.


Features:

  1. Support 4 types of content loading: iframe, AJAX, image and inline.
  2. Zoom effect when opening and closing lightbox.
  3. Adjustable position: top, left or center.
  4. Adjustable dimension: width, height.
  5. Auto resize when displaying image.
  6. Auto 'fit to screen' while maintaining the aspect ratio when displaying large image.
  7. Displaying group of images with prev/next navigation button.
  8. Center on window resize.
  9. Support 2 floating type: fixed or animated (scroll), the box is always visible even when user scroll the main window.
  10. Overlay.
  11. Option to display the box while loading or display the box after content is loaded.
  12. Unobtrusive loading method.
  13. Support all popular browsers.
  14. Client API.
  15. Lightweight, small script size and framework independent.


TABLE OF CONTENTS



1. USAGE

NlsLightbox is unobtrusive JavaScript control. The behavior (event) is separated from the markup. Below is the example to load content into lightbox:


      <!-- Include required scripts and stylesheet -->
      <script src="lib/nlslightbox.js" language="javascript" type="text/javascript"></script>
      <script src="lib/nlsanimation.js" language="javascript" type="text/javascript"></script>
      <link rel="StyleSheet" type="text/css" href="themes/default/nlslightbox.css" />

      <!-- Initialize the lightbox in body onload event -->
      <script language="javascript" type="text/javascript">

        //run the script on body onload event.
        window.onload=function() {

          //create the lightbox instance
          var lightbox = new NlsLightBox();

          //register link with id 'idopenpage' to open in lightbox.
          lightbox.register(["idopenpage"], {type:"iframe",width:"800px",height:"400px",center:false,top:"50px",left:"50px",adjX:"0px",adjY:"50px"});

        }
      </script>

      <!-- Define link or element which trigger the lightbox. -->
      <body>
        <a id="idopenpage" href="http://www.domainname.com" title="Open the website">Open the link in lightbox</a>
      </body>

The advantage of this technique is when user disable javascript or the scripts fails to load, the link is still working as traditional hyperlink. However in some cases, there maybe need to open the lightbox using inline javascript. For example from button or other clickable element. Below is the example to load content into lightbox using inline javascript. 


      //create the lightbox instance
      var lightbox = new NlsLightBox();

      <body>
        <input type="button" value="Open Contact" onclick="lightbox.open({type:'ajax',url:'/contact.php'})" />
      </body>

Next chapters explain more detail about NlsLightBox types and options and how to implement them.


2. NLSLIGHTBOX TYPES

NlsLightBox support 4 options to load content:

  1. Image Viewer.

    One of the main function of lightbox is viewing image. NlsLightBox supports displaying single image and series/group of images.

    To view single image:

    
          //run the script on body onload event.
          window.onload=function() {

            //create the lightbox instance
            var lightbox = new NlsLightBox();

            //register link with id 'idimage' to open in lightbox.
            lightbox.register(["idimage"], {type:"image",center:true,adjX:"0px",adjY:"50px"});

          }

          <body>
            <a id="idimage" href="/images/image.jpg" title="Open image"><img src="/images/image_small.jpg" alt="image1" /></a>
          </body>

    To view group of images:

    
          //run the script on body onload event.
          window.onload=function() {

            //create the lightbox instance
            var lightbox = new NlsLightBox();

            //register link with id 'idimage' to open in lightbox.
            lightbox.registerGroup(["idimage1", "idimage2", "idimage3"], {type:'image',zoom:true,showOnLoaded:true,scrAdjH:-100});

          }

          <body>
            <a id="idimage1" href="/images/image1.jpg" title="Open image1"><img src="/images/image_small1.jpg" alt="image1" /></a>
            <a id="idimage2" href="/images/image2.jpg" title="Open image2"><img src="/images/image_small2.jpg" alt="image2" /></a>
            <a id="idimage3" href="/images/image3.jpg" title="Open image3"><img src="/images/image_small3.jpg" alt="image3" /></a>
          </body>

    In this mode, to navigate to next or previous image, there are prev and next buttons that will be displayed when mouse hover over the left/right edge of image.

  2. Load content via AJAX.

    This option load content using AJAX mechanism. The advantage of this option is content loaded without refreshing entire page. This can be use to load part of page, form or any type of html content. To load content via AJAX just set the type='ajax' in the lightbox option. 

    
          //run the script on body onload event.
          window.onload=function() {

            //create the lightbox instance
            var lightbox = new NlsLightBox();

            //register link with id 'idajax' to open in lightbox.
            lightbox.register(["idajax"], {type:"ajax",center:true,adjX:"0px",adjY:"50px"});

          }

          <body>
            <a id="idajax" href="/mycontent/latest_news.htm" title="Latest News">View Latest News</a>
          </body>
  3. Load content in IFRAME

    Load content into iframe. This mean anything loaded into the box is independent of its main window. It is very useful to display existing content or form without reloading the main window. 

    
          //run the script on body onload event.
          window.onload=function() {

            //create the lightbox instance
            var lightbox = new NlsLightBox();

            //register link with id 'idiframe' to open in lightbox.
            lightbox.register(["idiframe"], {type:"iframe",center:false,top:"50px",left:"50px",adjX:"0px",adjY:"50px"});

          }

          <body>
            <a id="idiframe" href="http://www.domain.com/page.htm" title="Open my page">Open My Page</a>
          </body>
  4. Load inline content

    This option allow user to load loaded content (part of page) into lightbox. For example, a login form, which is already loaded into a page but not visible. It can be loaded (actually moved and displayed) in lightbox.

    To load inline content, specify type="inline" and set link's href="#id_of_element_to_load", for example:

    
          //run the script on body onload event.
          window.onload=function() {

            //create the lightbox instance
            var lightbox = new NlsLightBox();

            //register link with id 'idinline' to open in lightbox.
            lightbox.register(["idinline"], {type:"inline",center:true,adjX:"0px",adjY:"50px"});

          }

          <body>
            <div id="divContent">Hello...content here...</div>
            <a id="idinline" href="#divContent" title="Latest News">View Latest News</a>
          </body>

    Notice the trigger element which is a hyperlink has href attribute set to id of inline content with # character as prefix.


3. NLSLIGHTBOX OPTIONS

Below are list of available options when using lightbox:


4. FUNCTIONS REFERENCE

Below are public functions supported by NlsLightBox: