Quick Start Guide

Quick Start

Add a class="wplightbox" attribute to any link to activate the Lightbox effect.

To show a caption, use attribute title. To define the size of the Lightbox popup, use attribute data-width and data-height.

To edit the HTML code and add the attributes, in your WordPress post or page editor, switch to Text mode, then edit the text.

Image Lightbox

Live demo: Image Lightbox

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image0.jpg" class="wplightbox" title="WonderPlugin Image Lightbox">Image Lightbox</a>

Use data-weblink and data-weblinktarget to specify a web address and link target when clicking on the lightbox image

Live demo: Image Lightbox with Weblink

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image3.jpg" class="wplightbox" data-weblink="https://www.wonderplugin.com" data-weblinktarget="_blank" title="Click the image to visit &lt;a href=&quot;https://www.wonderplugin.com&quot; target=&quot;_blank&quot;&gt;https://www.wonderplugin.com&lt;/a&gt;">Image Lightbox</a>

YouTube Lightbox

Live demo: YouTube Lightbox

Demo code:

<a href="https://www.youtube.com/embed/c9-gOVGjHvQ" class="wplightbox" title="WordPress Carousel Plugin" data-width="640" data-height="360">YouTube Lightbox</a>

Vimeo Lightbox

Live demo: Vimeo Lightbox

Demo code:

<a href="https://player.vimeo.com/video/147149584" class="wplightbox" title="WordPress Slider Plugin">Vimeo Lightbox</a>

MP4 video Lightbox

The provided MP4 videos must be HTML5 compatible. Please visit the link for how to convert vidoe to HTML5 compabitle.

Live demo: Video Lightbox

Demo code (please make sure to change the video URL to your own):

<a href="https://www.wonderplugin.com/videos/demo-video0.mp4" class="wplightbox" title="Big Buck Bunny Copyright Blender Foundation" data-width=960 data-height=544>Video Lightbox</a>

MP4 video Lightbox - goto a web address when clicking on the video

Use data-weblink and data-weblinktarget to specify a web address and link target when clicking on the lightbox video

Live demo: Video Lightbox with Weblink

Demo code (please make sure to change the video URL to your own):

<a href="https://www.wonderplugin.com/videos/wonderplugin-carousel.mp4" class="wplightbox" data-weblink="https://www.wonderplugin.com" data-weblinktarget="_blank" data-width=960 data-height=544 title="Click the video to visit &lt;a href=&quot;https://www.wonderplugin.com&quot; target=&quot;_blank&quot;&gt;https://www.wonderplugin.com&lt;/a&gt;">Video Lightbox</a>

Image & video Lightbox gallery with thumbnail navigation

To create a gallery of images and videos, you can add a attribute data-group to the related links. You can use any string as the group name, as long as all of the links in one gallery has same value.

You can use data-thumbnail to add thumbnail navigation to the gallery.

Live demo

Demo code (please make sure to change the image and video URL to your own):

<a href="https://www.wonderplugin.com/videos/demo-image1.jpg" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-image1-tn.jpg" title="Image"><img src="https://www.wonderplugin.com/videos/demo-image1-tn.jpg" /></a>
 
<a href="https://www.youtube.com/embed/c9-gOVGjHvQ?rel=0&vq=hd1080" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-youtube-tn.jpg" title="YouTube"><img src="https://www.wonderplugin.com/videos/demo-youtube-tn.jpg" /></a>
 
<a href="https://player.vimeo.com/video/147149584?title=0&byline=0&portrait=0" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-vimeo-tn.jpg" title="Vimeo"><img src="https://www.wonderplugin.com/videos/demo-vimeo-tn.jpg" /></a>
 
<a href="https://www.wonderplugin.com/videos/demo-video1.mp4" data-webm="https://www.wonderplugin.com/videos/demo-video1.webm" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-video-tn.jpg" title="Video" data-width=960 data-height=544><img src="https://www.wonderplugin.com/videos/demo-video-tn.jpg" /></a>

Show title and description in Lightbox

To show a title, use attribute title.

To show a description, you need to enable the option Show description in the Lightbox Options page, then add data attribute data-description to your link.

Live demo: Lightbox with title and description

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image2.jpg" class="wplightbox" title="You can display a title." data-description="You can also display a description." >Lightbox with title and description</a>

Customise the lightbox with data attributes - display text on the right side of the lightbox

You can change the lightbox options in the plugin menu -> Lightbox Options. The change will apply to all lightboxes on the website.

Instead of changing options for all lightboxes, you can also use data attributes to change the specified lightbox link. The following demo will use data attribute to display the text on the right side of the lightbox.

Live demo: YouTube Lightbox

The HTML code is as follows:

<a href="https://www.youtube.com/watch?v=c9-gOVGjHvQ" class="wplightbox" data-titlestyle="right" data-width="640" data-height="360" title="WonderPlugin Carousel" data-description="WonderPlugin Carousel is a WordPress plugin that enables you to create WordPress posts carousel for categories, WordPress recent posts carousel, image carousel slider, image scroller and video LightBox. The plugin supports WordPress posts, images, YouTube, Vimeo, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.">YouTube Lightbox</a>

For all available data attribute options, please view WonderPlugin Lightbox Options

Open a div in Lightbox

To open a div in the lightbox, firstly, define a div with an ID in your webpage. You can add CSS style display:none; to make it invisible on the page.

You can then use #DIVID as the href value of the lightbox link.

Live demo: Open a Div in Lightbox

Demo code:

<a href="#mydiv" class="wplightbox" data-width=800 data-height=500 >Open a Div in Lightbox</a>
<style type="text/css">
    .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;
      }
    }
</style>
 
<div id="mydiv" style="display:none;">
    <div class="lightboxcontainer">
        <div class="lightboxleft">
          <div class="divtext">
            <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">WonderPlugin Gallery</p>
            <p class="divdescription" style="font-size:14px;line-height:20px;"> WonderPlugin 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. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11. </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>