The BNE Creative Framework incorporates a simple, responsive lightbox plugin called Magnific Popup. You can display a simple image, iframe, gallery or inline content using a lightbox. The lightbox shortcode is included to easily create a lightbox instance from your content or you can manually set it up with HTML.
Image Lightbox from Thumbnail
Lightbox from Buttons
Use a button or link to also open a lightbox image or iframe.
Open Lightbox Image Open Lightbox YouTube Open Lightbox Iframe
Lightbox Gallery
When inserting a standard WordPress [gallery], linking thumbnails to the Media Files, will allow your theme to automatically link them all to lightbox popups.
Lightbox Shortcode Options
| Argument | Default | Description |
|---|---|---|
| type | image | Type of lightbox - image, iframe, video |
| link | The full url to the image/iframe/video to display within the lightbox. | |
| thumb | (optional) The full url to an image that will trigger the lightbox. If no thumb, then it will be a normal text link. | |
| width | Size of Thumb | max width of the thumbnail image - 300px, 20% etc. |
| frame | pretty | Add a default theme style to the image - true or false |
| label | The alternate title that will be displayed below the lightbox popup. | |
| class | Add an optional class name to the image and link. You can change the text link to a button by adding the button classes. |
Manually Linking to a Lightbox
If you're comfortable with basic HTML, you can also link to a lightbox quite easily. Below are some examples.
Image
<a href="http://yoursite.com/uploads/image.jpg" class="bne-lightbox lightbox-image" title="Title Here">
<img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>
Vimeo
<a href="https://vimeo.com/1234568" class="bne-lightbox lightbox-iframe" title="Title Here">
<img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>
YouTube
<a href="https://youtube.com/?watch=1234568" class="bne-lightbox lightbox-iframe" title="Title Here">
<img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>
Google Map
<a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom" class="bne-lightbox lightbox-iframe" title="Title Here">
<img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>
Inline DIV
<a href="#myPopup" class="bne-lightbox lightbox-inline" title="Title Here">Link to lightbox content</a> <div id="myPopup" class="white-popup hide">Some content...</div>
For complete documentation on using Magnific Popup, make sure to visit the official website, which you can find here.