Hi friends in this blog I’m explaining about lightbox in javascript and css.

Description:

In this example, we create a LightBox using JavaScript and CSS. So when we click on the image the following LightBox will be shown:

Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.

First we take some images (when we click on the images the LightBox will be shown). We will place this image in a 

HTML Code

       <sectionid="examples"class="examples-section">
              <divclass="container">
 
                     <h3style="clear: both;">Four image set</h3>
 
                     <divclass="image-row">
                           <divclass="image-set">
                                  <aclass="example-image-link"href="img/demopage/image-3.jpg"data-lightbox="example-set"data-title="Click the right half of the image to move forward."><imgclass="example-image"src="img/demopage/thumb-3.jpg"alt=""/></a>
                                  <aclass="example-image-link"href="img/demopage/image-4.jpg"data-lightbox="example-set"data-title="Or press the right arrow on your keyboard."><imgclass="example-image"src="img/demopage/thumb-4.jpg"alt=""/></a>
                                  <aclass="example-image-link"href="img/demopage/image-5.jpg"data-lightbox="example-set"data-title="The next image in the set is preloaded as you're viewing."><imgclass="example-image"src="img/demopage/thumb-5.jpg"alt=""/></a>
                                  <aclass="example-image-link"href="img/demopage/image-6.jpg"data-lightbox="example-set"data-title="Click anywhere outside the image or the X to the right to close."><imgclass="example-image"src="img/demopage/thumb-6.jpg"alt=""/></a>
                           </div>
                     </div>
              </div>
       </section>

Download Css file

<linkrel="stylesheet"href="css/screen.css">
<linkrel="stylesheet"href="css/lightbox.css">

 Download Script file

<scriptsrc="js/jquery-1.11.0.min.js"></script>
<scriptsrc="js/lightbox.js"></script>

Output

After Click image Output

in my next post i'll explain about Error handling in CSS