The other day I was working on a client project and needed a quick way to display a popup with a bit of content when a user clicked on a link. I know there are quite a few Lightbox plugins in WordPress for photo galleries and such, but that wasn’t what I was looking for.
I searched around for a while, and found Lightbox Plus for WordPress. Its main purpose is to add lightboxes to photos, but it has a secondary use for adding inline content popups. After installing it and playing around for a while, here’s how I got it working for my project.
1. Install the Lightbox Plus Plugin
Download the plugin from the WordPress Plugin repository, upload it to your plugins folder, and activate it in your Plugins menu. Alternatively, you can click Add New in your Plugins menu, search for Lightbox Plus, and click Install Now.
2. Adjust the Plugin Settings
After activating the plugin, you can edit its settings under Appearance->Lightbox Plus. There are lots of options for images, but we are going to focus on the Advanced Settings at the bottom of the settings page.
Check the box for Use Secondary Lightbox and Add Inline Lightboxes. Next, choose the number of inline lightboxes you will need on your site. You can add more later, but each one will needs a unique ID generated by the plugin to work correctly. I will add two for this example.
Click Save Settings and scroll down to the newly created Inline Lightbox Settings. Under Inline Lightbox – Individual Settings there is now a table that lists the info that you’ll need to create your Inline Lightbox.
You can adjust the width and height of your lightbox as needed, just be sure to click Save Settings when you’re done.
3. Add the Code to your Page
For the code to work, you’ll need the add the link class to an <a> element and the content ID to a <div> element. Here is the code you would need to add to your page for Inline Lightbox #1:
<a class="lbp-inline-link-1 cboxElement" href="#">Click here to open popup #1</a> <div style="display: none;"> <div id="lbp-inline-href-1" style="padding:10px; background: #fff;"> <p>This content will be in a popup.</p> </div> </div>
This will place a link on your page that, when clicked, will open up the content inside the div element in a lightobx. You can put anything you would like inside the div, including forms and videos.
Switch the content editor to HTML mode, copy and paste the above code into your content editor, and add the content that you would like to be in your popup inside the second <div> element.
You can add the second popup as well, just make sure you change the “1” in the link class and content ID on the second popup to “2”.
4. Test It Out
Save your page, view it, and click on the link. The content that you placed inside the div will now be displayed in a lightbox!
If you have any issues, make sure you copied and pasted the code above correctly, and that your link class and content ID match what is shown in the Inline Lightbox settings.
If you need additional help, I would recommend checking out the Support Forums.