Home > DeveloperSection > Blogs > Create Simple Lightbox in javaScript and CSS

Create Simple Lightbox in javaScript and CSS


CSS-CSS3 CSS  CSS Selector 
Ratings:
0 Comment(s)
 1834  View(s)
Rate this:

Create Simple Lightbox in javaScript and CSS

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

       <section id="examples" class="examples-section">

              <div class="container">

 

                     <h3 style="clear: both;">Four image set</h3>

 

                     <div class="image-row">

                           <div class="image-set">

                                  <a class="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."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>

                                  <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>

                                  <a class="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."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>

                                  <a class="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."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>

                           </div>

                     </div>

              </div>

       </section>

 

 

 

Download Css file

<link rel="stylesheet" href="css/screen.css">

<link rel="stylesheet" href="css/lightbox.css">

 

Download Script file

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

<script src="js/lightbox.js"></script>

 

 

Output

After Click image Output

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


Don't want to miss updates? Please click the below button!

Follow MindStick