---
title: "Create Simple Lightbox in javaScript and CSS"  
description: "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 C"  
author: "Anonymous User"  
published: 2014-11-14  
updated: 2014-11-14  
canonical: https://www.mindstick.com/blog/705/create-simple-lightbox-in-javascript-and-css  
category: "css-css3"  
tags: ["css", "css selector"]  
reading_time: 2 minutes  

---

# Create Simple Lightbox in javaScript and CSS

Hi [friends](https://answers.mindstick.com/qa/31396/where-did-the-suggest-to-friends-feature-go) in this blog I’m explaining about lightbox in [javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-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](https://answers.mindstick.com/qa/93922/why-c-sharp-programmers-use-properties-technique-in-c-sharp-programming) used to [display images](https://www.mindstick.com/forum/147/how-to-display-images-in-asp-dot-net) and other [web content](https://www.mindstick.com/blog/303211/explore-the-web-content-accessibility-guidelines-wcag-2-1) using modal dialogs where the image is shown up center [filling](https://yourviews.mindstick.com/audio/1303/the-power-of-silence-what-happens-when-you-stop-filling-every-moment) 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](https://www.mindstick.com/articles/65049/5-wordpress-plugins-to-help-you-amplify-your-seo-efforts) 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](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) 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

**![Create Simple Lightbox in javaScript and CSS](https://www.mindstick.com/blogs/4fff744b-abae-40c2-942c-b8d157eb96df/images/9d135a7f-fd0c-4ef5-9d90-e95c1e576858.png)**

## After Click image Output

**![Create Simple Lightbox in javaScript and CSS](https://www.mindstick.com/blogs/4fff744b-abae-40c2-942c-b8d157eb96df/images/9f59b0ca-8ad0-4239-b01f-d203af16b31e.png)**

in my next post i'll [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) about [Error handling in CSS](https://www.mindstick.com/blog/706/Error%20handling%20in%20CSS#.VPabxvmUdz8)

---

Original Source: https://www.mindstick.com/blog/705/create-simple-lightbox-in-javascript-and-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.