Using a jQuery Plugin: Lightbox (A Pop-up Image Viewer)

Topics covered in this JavaScript tutorial:

How to Use a jQuery Plugin, Adjusting the Options of a jQuery Plugin, Creating a Photo Enlarger (often called a Lightbox), Grouping the Photos Into a Gallery, Customizing the Appearance

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use a free jQuery lightbox plugin called Magnific Popup. When a user clicks a thumbnail image to see a larger version, JS can create a “lightbox” effect. The images open within the page, and you can easily switch between photos with buttons/keystrokes, and then close it.

Getting Started

1. For this exercise we’ll be working with the Lightbox-Gallery folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open photos.html from the Lightbox-Gallery folder.

3. Preview photos.html in Chrome. (We’ll be using its DevTools.)

   Click some of the photos in the gallery to see they are just links to a large picture. They are not pages, so each browser can display them differently. Let’s improve the look and functionality.

4. Leave the page open in Chrome so we can come back to it later.

Linking to the Plugin Files

We’ve included the Magnific Popup file in our class files, but you can also visit dimsemenov.com/plugins/magnific-popup to download it, read the documentation, and see examples.

At a minimum, Magnific Popup requires 3 files to run—jQuery, the Magnific Popup JS file, and the Magnific Popup CSS file. Let’s link to the CSS file first.

1. Return to photos.html in your code editor.

2. It’s important to link to the Magnific Popup CSS before our custom CSS. This way our CSS will override any styling in the plugin. Above the link to main.css, link to the Magnific Popup CSS file as shown in bold:

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="js/vendor/magnific-1.1.0/magnific-popup.css">
      <link rel="stylesheet" href="css/main.css">
   </head>
   

3. Next we’ll link to the jQuery JS file. At the bottom near the end of the body tag, above the link to our own main.js file, add the following bold code:

      <script src="js/vendor/jquery-3.6.0.min.js"></script>
      <script src="js/main.js"></script> 
   </body>
   

4. Next we’ll link to the Magnific Popup JS file. Below the jQuery link, add the following bold code:

   <script src="js/vendor/jquery-3.6.0.min.js"></script>
   <script src="js/vendor/magnific-1.1.0/jquery.magnific-popup.min.js"></script>
   <script src="js/main.js"></script> 
   

5. Save the file.

Initializing the Pop-up

1. We’ve linked to all the files, so we’re ready to initialize Magnific Popup. We’ll start with a prepared code snippet we got from the documentation on the Magnific Popup website. From the snippets folder, open magnific-initialize.js.

2. This code initializes the magnificPopup() function. When you click a link with an image-link class (which is just an example), it will load the linked image into the pop-up “lightbox”.

   Select and copy all the code.

3. From the js folder, open main.js.

4. Paste the code.

5. All our thumbnail image links reside in a div which has class of photo-gallery, so change the code as shown below in bold:

   $('.photo-gallery a').magnificPopup({type:'image'});
   

6. Save and reload the page in Chrome.

   • Click any of the image thumbnails and a large image should pop up. Sweet!
   • Below the photo notice there’s a caption. Later we’ll explain how that got there.
   • To close the image, click the close X at the top right of the image, or click in an empty area of the page outside the image.

Grouping the Photos into a Gallery

It would be nice if the photos were grouped together so that the user could go between them with next and previous buttons (or keystrokes). We can do that Magnific Popup.

1. Switch back to main.js in your code editor.

2. Inside the options object {}, add returns to put the setting on it’s own line, so you end up with the following:

   $('.photo-gallery a').magnificPopup({
       type:'image'
   });
   

3. Add the following bold code:

   $('.photo-gallery a').magnificPopup({
      gallery: {
         enabled: true
      },
      type: 'image'
   });
   

4. Save and reload the page in Chrome.

   • Click on any photo thumbnail to see the pop-up.
   • There should now be arrows on the left and right. Click them to change images.

5. Press the Left or Right Arrow key on the keyboard. Nice! Users can navigate through the images with the Arrow keys or by clicking the buttons.

   • On the bottom right there’s now an image counter.
   • Notice the image, caption, and counter all change as you change images.

6. There’s one more way to change photos. Click on the enlarged photo to advance to the next image.

7. Press the Esc (Escape) key to close the enlarged image.

Captions

Magnific Popup can add captions to the enlarged images. To do this it looks at the title attribute of the link that is clicked. If the link has a title, it will add it as a caption. If there is no title, then there’s no caption.

1. Switch back to photos.html in your code editor.

2. On the first link (around line 36), notice there’s a title attribute as shown below:

   <a href="img/gallery/enlargements/hot-air-baloon.jpg" title="Sailing in South Lake Tahoe">
   

   This title attribute is used for two purposes:

   • When you hover over something in a title attribute and pause for a moment, desktop browsers will display a tooltip with that text.
   • Magnific Popup uses the title attribute’s text as the caption for the enlarged photo.

Removing the Counter

We like the counter, but what if you want to remove it? Magnific Popup has an option to customize the text of the counter. Instead of changing the text to something else, we’ll simply set it to nothing at all!

1. Switch back to main.js in your code editor.

2. To remove the counter, we need to customize its text. By setting the text to nothing, we’ll remove it. Add the following bold code, but don’t miss the comma at the end of the line above it!

   gallery: {
      enabled: true,
      tCounter: '' // those are 2 single quotes!
   },
   type: 'image'
   

3. Save and reload the page in Chrome.

   • Click on the any thumbnail image.
   • The counter should not be there anymore.

   Keep the lightbox open, we’re not done with it yet.

Customizing the Look of the Captions

We can change the styling of the captions with CSS. First we need to find out how Magnific Popup is styling them.

1. The caption should be visible on the bottom left of the enlarged image. Ctrl–click (Mac) or Right–click (Windows) on the caption text and choose Inspect.

2. In the DevTools you should be able to see that the caption is wrapped by <div class="mfp-title"> which we can target for styling.

3. While we’re in the DevTools, make sure the .mfp-title div is selected, and in the Styles panel notice the CSS. You should see it has padding-right: 36px; (to make room for the counter).

   We want to center the text, so now that we’ve removed the counter, we must equalize the left and right padding or the text won’t be properly centered.

4. Switch back to your code editor.

5. From the css folder, open main.css.

6. Above the min-width: 600px media query (around line 92), add the following:

   .mfp-title {
      text-align: center;
      font-size: 1.2rem;
      padding: 5px;
   }
   
   @media (min-width: 600px)
   

7. Save and reload the page in Chrome.

   • Click any thumbnail image.
   • Notice the caption should now be centered, larger than before, with a little more space above (and equal padding on the left/right so it’s truly centered).

   Keep the lightbox image open, we’re not done with it yet.

Customizing the Overlay’s Background Color

Magnific Popup adds an overlay behind the enlarged photo to help separate it from the page’s content. We can change the color of that, and we’d like to lighten it.

1. With the lightbox still open, Ctrl–click (Mac) or Right–click (Windows) outside the enlarged image (on the background) and choose Inspect.

2. In the DevTools, find the first tag inside the body tag. It should be <div class="mfp-bg mfp-ready"></div>

3. Select that tag and in the Styles panel, find the .mfp-bg rule.

   Notice it has a background of #0b0b0b

4. Switch back to main.css in your code editor.

5. Below the .mfp-title style, add the following:

   .mfp-bg {
      background: #333;
   }
   

6. Save and reload the page in Chrome.

   Click on any thumbnail image and notice the background is now a lighter gray.

Optional Bonus: Customizing the Look of the Arrows

With the lightbox still open, notice the color of the left/right arrows. Let’s see how we could change that color.

1. Ctrl–click (Mac) or Right–click (Windows) on the lightbox’s right arrow (next) and choose Inspect.

2. In the DevTools, expand the button element to see the ::before and ::after elements inside.

   

   NOTE: The ::before element is the outline and the ::after element is the fill.

3. Select the ::before element.

   • In the Styles panel, find the .mfp-arrow-right:before rule and notice that it has border-left: 27px solid #3f3f3f;

4. Select the ::after element.

   • In the Styles panel, find the .mfp-arrow-right:after rule and notice that it has border-left: 17px solid white;

   To adjust the color of the fill and outline we can change these two elements. If we made you manually style these, you’d copy and paste several class names, so we’ve saved you some time and made a snippet.

5. Switch back to your code editor.

6. From the snippets folder, open magnific-arrow-colors.css.

7. Select and copy all the code.

8. Switch back to main.css.

9. Paste the new rules below the .mfp-bg rule.

   NOTE: You can use this snippet in your own projects, but you’ll want to customize the colors to fit your design.

10. Save and reload the page in Chrome.

    • Click any thumbnail image and notice the arrows are now filled with blue instead of gray.
    • Hover over them and notice the opacity changes so they appear brighter.