Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. jQuery

Super Simple Lightbox With CSS and jQuery

Read Time:9 minsLanguages:

Rather than using a bloated plugin that has features you'll never use, this tutorial shows you how to create a super simple lightbox for handling images. It's perfect for image galleries, portfolios, and more!

The Lightbox Demo We’re Building

Step 1: The Markup

Open up your favorite text editor (I use Coda) and let's start with our HTML markup.

Note: We used the class lightbox_trigger on every link that has an image we want to show in our lightbox. This becomes useful when we want to target those elements in the script we will write.

Step 2: The CSS

Let's apply some basic CSS styling to our page. For this basic example, we will place all our CSS in <style></style> tags within the <head> section.

Now we have a simple but elegant page in which we can test out our lightbox window.

Step 3: Notes on CSS in Internet Explorer

We used margin: 0 auto; to center our #wrapper div horizontally on the page. This works great for all browsers except...drum roll...you guessed it, Internet Explorer. To fix this issue, we used text-align:center; on the body tag which centers child divs (in our case, the #wrapper div) horizontally on the page.

However, using text-align:center; on the body tag will center align all text in child divs as well. To fix this, we reset text-align:left; in the #wrapper div to restore all further child content to left alignment. Check out communitymx.com if you're interested in learning more about this particular IE issue.

Step 4: Lightbox HTML

This is what our lightbox HTML markup will look like. However, do not insert it into the HTML markup. We will do that dynamically with jQuery. Understanding the lightbox HTML markup allows us to style it with CSS accordingly.

Note: There is no value for the image src because that will be dependent upon which link is clicked by the user. Hence, we will use javascript to insert the value dynamically later on.

Step 5: Lightbox CSS Black Overlay

Let's go ahead and insert the CSS for our lightbox. By doing this now, our page elements will display properly later on when we dynamically insert our HTML.

First we have our #lightbox div which acts as the black overlay. We want this to fill the user's entire viewport, no matter the screen resolution.

The CSS is pretty straightforward. Here are a few highlights:

  • position:fixed makes our overlay appear correctly in the current viewport, no matter the user's position on screen (top or bottom of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won't appear correctly.
  • width:100%; height:100%; This makes our #lightbox div, which acts as the black overlay, cover the entire viewport no matter the end user's screen resolution.
  • background:url(overlay.png) repeat; We could have used RGBa color to make our background color slightly transparent. This would have required something like background: rgba(0,0,0,.7);. However, since this property is fairly new, background color transparency won't work in IE (unless you apply certain hacks). So instead of using CSS3 and IE hacks, we simply create a 1x1 pixel PNG in photoshop with a black background and set the transparency at about 75 percent.

Step 6: Lightbox CSS User Instructions

Just to make sure our users aren't confused, we will add some text in the lightbox overlay stating they can click anywhere to have the lightbox window disappear.

Step 7: Lightbox CSS Image

Now we want to style the image that will appear in the lightbox. I am simply going to give it some CSS3 effects. These obviously won't appear in IE and older browsers, but it still degrades gracefully. You could add other effects here if you wanted, like a white border around the image.

Note:Adding a max-width will shrink any high-resolution images we might be linking to. This helps to ensure all images fit into the viewport.

This is what our page would now look like if we inserted our lightbox HTML into the document (we're going to do that with javascript):

Image courtesy of CSS Lounge Photostream on Flickr

Step 8: Determining the Logic

If the user clicks a link to image, we want to display the image in a lightbox. To do this, we first want determine the logic behind our functionality:

  • User clicks link with class lightbox_trigger
    • Prevent the browser from following the link by default
    • See if the lightbox div is already inside the document
      • If it exists:
        • Find and the existing img tag inside the content div.
        • Replace the image's src value with the href value of whatever link was clicked.
      • If it doesn't exist:
        • insert the lightbox markup into the page with the image's src value set to the href value of whatever link was clicked
  • Allow any click on the lightbox (when displayed) to make it disappear

Step 9: JavaScript Including jQuery

Now that we have our HTML markup, CSS styling, and JavaScript logic, it's time to delve into the code and get our functionality working.

First we include the jQuery library. I like to add it right before the closing body tag using jQuery's hosted version.

Step 10: JavaScript Custom Script

Let's wrap our code in script tags and jQuery's document.ready

We will include our custom script right after including the jQuery library. We setup our jQuery function using the dollar sign "$" in the function parameter, that way we don't have to write "jQuery" every time we want to use jQuery functionality. Instead we can simply use "$".

Step 11: JavaScript lightbox_trigger Function

As explained earlier in Step 1, for each linked image that will use the lightbox, we assigned it a class of lightbox_trigger. In our script, we create a function that will fire every time a link with the class lightbox_trigger is clicked.

Step 12: JavaScript Inside the Function

First, we want to prevent the default action. This prevents the browser from opening the linked image in a new page. (To see why we use preventDefault() click here

Next, we get the href of the image we will display in the lightbox from the link that was clicked:

This is where our predetermined logic really comes into play. Because we are inserting our lightbox HTML dynamically, we want to first see if it already exists in the document. So, we will run an if/else statement.


If the lightbox div exists, we will replace the img tag inside the content div. We will also make sure the src value of the image tag is set to match the href of whatever link was clicked.


If our lightbox div cannot be found in the document, we will create it and insert it. This will only run the first time a lightbox link is clicked.

Step 13: JavaScript Hiding the Lightbox Window

Lastly we want to hide the lightbox window whenever the user clicks on it. Because the div lightbox is inserted after the DOM is already constructed (the page has already loaded) we have to tell jQuery that we are placing a new div in our page and to watch for clicks on this new elements. We do this by using .on() rather than .click():

Note: in previous versions of this tutorial we used .live() but this was removed from jQuery in version 1.9. We therefore have migrated it to use .on().

Step 14: JavaScript Final Code

Now that we've examined our lightbox script, here is what the whole thing looks like:

Final Lightbox Demo

Let’s remind ourselves of the simple lightbox we’ve built:

That’s it! Now you have a lightweight lightbox solution for displaying images. I hope you enjoyed this tutorial and learned something new! Thanks for reading.

Premium Options

This tutorial has taught you the do-it-yourself approach, but if you prefer a ready-made solution, Envato Market has lots of lightbox plugins available. Here's a selection of the most popular:

1. Lightbox Evolution

Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Lightbox Evolution jQueryLightbox Evolution jQueryLightbox Evolution jQuery
Lightbox Evolution

2. PopupPress - Popups with Slider & Lightbox for WP

PopupPress is a Wordpress plugin that lets you easily create elegant overlapping windows. This plugin is intended to insert any type of content in a Popup of the fastest and easiest way on any page of WordPress. It also has a simple system statistics for the number of views of the popups. 

PopupPress - Popups with Slider  Lightbox for WPPopupPress - Popups with Slider  Lightbox for WPPopupPress - Popups with Slider  Lightbox for WP
PopupPress - Popups with Slider & Lightbox for WP
Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.