Manual Usage

The Responsive Lightbox plugin enables users to apply different lightbox effects to images, videos, and galleries. By default, the lightbox effect you configure from the Settings page will be applied to all of the published images, videos, and galleries on your website.

Single Image

If you want the lightbox effect added to only one image (or a handful of selected images) then all you have to do is select a lightbox script, create a selector, and add it to the image’s link. Here’s how:

General Settings screen.

  1. Navigate to Settings > Responsive Lightbox from the admin panel.
  2. In the General Settings tab:
    1. Select a Lightbox script.
    2. Specify a Selector. We’ll use the selector lightbox.
    3. Uncheck the Image links option.
  3. Click the Save Changes button to proceed.
  4. Head over to the image in the post (or page) where the lightbox needs to be applied and open it up in the Text tab in the text editor.
  5. In the image’s link, add the code data-rel=”lightbox” at the end of the opening a href It should look something like this: <a href=”image-link” data-rel=”lightbox”><img class =”some-text-here” src=”image-link” /></a>

Gallery

The Responsive Lightbox plugin allows you to create custom galleries anywhere in your WordPress theme. There are two different ways of doing this:

  • Configure Responsive Lightbox to apply lightbox effect for all galleries by default.
  • Create a custom gallery from image links in your theme to apply the lightbox effect to.

To demonstrate, we’ll create a gallery of five images. Let’s take a look at both options one by one:

Apply Lightbox to All Galleries

General settings page

  1. Navigate to Settings > Responsive Lightbox from the admin panel.
  2. In the General Settings tab:
    1. Select a Lightbox script.
    2. Check the Galleries option.
  3. Click the Save Changes button to continue.
  4. Head over to the post (or page) where you’ve added a gallery and Preview It should look something like this:

Gallery preview

You’ll notice that the lightbox effect has been applied to all of the images in the gallery.

Apply Lightbox to Custom Galleries

General Settings page

  1. Navigate to Settings > Responsive Lightbox from the admin panel.
  2. In the General Settings tab:
    1. Select a Lightbox script.
    2. Uncheck the Single images as gallery option.
    3. Uncheck the Galleries option.
  3. Click the Save Changes button to continue.
  4. Head over to the post (or page) where you want to add your custom gallery.
  5. Insert the images you’d like to include in your gallery from the WordPress Media Library and open it up in the Text tab in the text editor once they’re added.
  6. In the image’s link, add the code data-rel=”lightbox-gallery-n” (where n is a unique gallery identifier) at the end of the opening a href It should look something like this: <a href=”image-link” data-rel=”lightbox-gallery-182″><img class =”some-text-here” src=”image-link” /></a>
  7. Repeat Step 6 for all images you want to include in the lightbox gallery. The unique gallery identifier value should remain unchanged for all images. To demonstrate, we’ll add the code to four of the images in our gallery.
  8. Preview the post (or page). It should look something like this:

Gallery preview for custom gallery

You’ll notice that the lightbox effect has been applied to only the selected four images in the gallery.

Videos

With the Responsive Lightbox plugin you can add a lightbox effect to videos. Depending upon the scripts your site runs, the videos may open to video links (not embedded videos) or in a gallery that contains mixed content (such as images and videos). Here’s how:

Apply Lightbox to All Videos

Settings screen for adding lightbox effect to all videos.

  1. Navigate to Settings > Responsive Lightbox from the admin panel.
  2. In the General Settings tab:
    1. Select a Lightbox script.
    2. Check the Video links option.
  3. Click the Save Changes button to continue.
  4. Head over to the post (or page) where you’ve added a video and Preview It should look something like this:

Video preview with lightbox effect

Apply Lightbox to Custom, Mixed Galleries

  1. Navigate to Settings > Responsive Lightbox from the admin panel.
  2. In the General Settings tab:
    1. Select a Lightbox script.
    2. Uncheck the Video Links as gallery
  3. Click the Save Changes button to continue.
  4. Head over to the post (or page) where you want to add your custom, mixed gallery.
  5. Insert the images and videos you’d like to include in your gallery from the WordPress Media Library and open it up in the Text tab in the text editor once they’re added.
  6. In the image’s link, add the code data-rel=”lightbox-gallery-n” (where n is a unique gallery identifier) at the end of the opening a href It should look something like this: <a href=”image-link” data-rel=”lightbox-gallery-182″><img class =”some-text-here” src=”image-link” /></a>
  7. Repeat Step 6 for all images and videos you want to include in the lightbox gallery. The unique gallery identifier value should remain unchanged for all images.

Disabling Lightbox

If you’d like to add the lightbox effect to all of your images save for a selected few then the Responsive Lightbox plugin lets you disable the lightbox effect for specific images, videos, and galleries. This is applicable when the automatic lightbox option is enabled for them from the settings page. Here’s how:

  1. Head over to the post (or page) that contains the images, videos, or galleries where you want to disable the lightbox effect.
  2. Insert the images and videos you’d like to include in your gallery from the WordPress Media Library and open it up in the Text tab in the text editor once they’re added.
  3. In the image’s (or video’s) link, add the code data-rel=”norl” at the end of the opening a href It should look something like this: <a href=”image-link” data-rel=”norl”><img class =”some-text-here” src=”image-link” /></a> in the case of an image.
  4. Repeat Step 6 for all images and videos you want to disable the lightbox effect on.

The plugin works by looking for all links that contain the parameter data-rel=”norl” and disabling the lightbox effect on them.