How to show HTML content in a WordPress lightbox

This tutorial will guide you how to show HTML content in a WordPress lightbox by using the plugin Wonder Lightbox.

The tutorial will also discuss how to open the HTML content in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

There are two steps in this tutorial:

Step 1 - Add the HTML content to a div on the webpage
Step 2 - Open the div in a WordPress lightbox
Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

Step 1 - Add the HTML content to a div on the webpage

In this step, we add the HTML content to a div on the webpage.

In the following HTML code, we assigned an ID youtubediv to the div, and used the inline CSS style="position:absolute;top:0;left:-9000px;" to hide the HTML content. If you also want to show the content on the page, you can remove the inline CSS.

<div id="youtubediv" style="position:absolute;top:0;left:-9000px;">
  <div class="lightboxcontainer">
    <div class="lightboxleft">
      <div class="divtext">
        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Wonder Gallery</p>
        <p class="divdescription" style="font-size:14px;line-height:20px;">
        Wonder Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. 
        The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. 
        </p>
      </div>
    </div>
    <div class="lightboxright">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>

Wonder Gallery

Wonder Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online.
The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos.

The HTML content can also be generated by a shortcode, for example:

<div id="audiodiv" style="position:absolute;top:0;left:-9000px;">
[[wonderplugin_audio id="56"]]
</div>

Pride and Prejudice Chapter 1

00:00 / 05:28

1
05:28
Pride and Prejudice Chapter 1
2
04:56
Pride and Prejudice Chapter 2
3
09:46
Pride and Prejudice Chapter 3
4
06:10
Pride and Prejudice Chapter 4
5
05:44
Pride and Prejudice Chapter 5

Please note, it's your own responsibility to style the HTML content. For example, for the YouTube lightbox, you can add the following CSS code to the WordPress theme to place the text on the left side, and the YouTube video on the right side.

.lightboxcontainer {
  width:100%;
  text-align:left;
}
.lightboxleft {
  width: 40%;
  float:left;
}
.lightboxright {
  width: 60%;
  float:left;
}
.lightboxright iframe {
  min-height: 390px;
}
.divtext {
  margin: 36px;
}
@media (max-width: 800px) {
  .lightboxleft {
    width: 100%;
  }
  .lightboxright {
    width: 100%;
  }
  .divtext {
    margin: 12px;
  }
}

Step 2 - Open the div in a WordPress lightbox

In this step, we use Wonder Lightbox to open the div content in a lightbox popup.

When adding the div ID, add a # sign before the ID, for example #youtubediv.

<a href="#youtubediv" class="wplightbox" data-width=800 data-height=600>Open the youtubediv content in a lightbox</a>

The created demo is as follows: Open the youtubediv content in a lightbox

Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

You can also open the HTML content in the lightbox of a gallery or a carousel.

For example, to open the HTML content in a lightbox of a gallery, in Wonder Grid Gallery, step 1, add an image, in the Add Image dialog, Lightbox and Weblink tab, uncheck the option "Open current image in Lightbox", enter #DIVID to the "Click to open web link" input box and check the option "Open web link in Lightbox".