Easy FancyBox is a WordPress plugin that integrates the FancyBox lightbox script into WordPress.
Easy FancyBox has no shortcodes and requires WP site admins to write HTML code when they want to add inline pop-ups that open with button or link clicks. I thought that was a bit complicated for most users so I wrote a plugin to replace the HTML with shortcodes.
VR Easy FancyBox Shortcodes plugin creates shortcodes to replace the basic FancyBox HTML code needed to create a popup box and to create the trigger for launching that box.
Current version: 1.0.1
First Release Date: 31st Dec. 2013
Updated Release Date: 22nd May 2015
Requirements
Installation
Install Easy FancyBox, activate it then install VR Easy Fancybox Shortcodes and activate it also.
Instructions
Configure Easy FancyBox by going to WP Dashboard > Settings > Media. Make sure the FancyBox plugin is configured to display the type of content you want to use it with.
VR Easy FancyBox Shortcodes has 2 shortcodes:
- [easyfbox box=”#”]Pop up Box Content[/easyfbox]
- [easypopper box=”#”]Trigger Button[/easypopper]
Put your popup content between the [easyfbox] shortcodes and put the popup button content between the [easypopper] shortcodes.
Each shortcode has a box number attribute i.e box=””. For the [easyfbox] shortcode, this box number is the identity of the popup box. For the [easypopper] shortcode, this box number is the identity of the box the popup button opens. The same popup box can be opened by multiple poppup triggers. Likewise, a single trigger button can be used to open multiple popup boxes.
What content can be used?
Any HTML or text can be used for the lightbox content or in the popper (trigger’s) content. The popper’s content is automatically turned into a clickable link so an image, text or embedded file etc.. can be used without you manually adding <a> link tags.
Example Usage
Easy FancyBox is not installed in JournalXtra so these examples are not live examples.
Example 1
As simple as it gets, display ‘Hello’ in a popup box when the text ‘Say Hello’ is clicked.
Put the popup content between the easyfbox shortcode tags:
[easyfbox box="1"]Hello[/easyfbox]
Put the trigger text between the easypopper shortcode tags:
[easypopper box="1"]Say Hello[/easypopper]
Example 2
Use an image as the trigger button and display an embedded document in the popup lightbox.
Add the lightbox content:
[easyfbox box="2"]<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>[/easyfbox]
Add the trigger’s content:
[easypopper box="2"]<img src="http://example.com/image.jpg" style="height: 250px;" />[/easypopper]
More examples below.
Additional information
The [easyfbox] shortcode accepts 6 attributes:
- box=””
- class=””
- width=””
- height=””
- unitw=””
- unith=””
The box attribute is the most important one. This gives the popup box a number. The button that opens the box must be given the same box number as the box it opens. Boxes that have the same numerical ID will open simultaneously when a trigger (popper) targets that numerical ID.
The class attribute correlates to the classes specified in Easy Fancybox for use with the popup box. Please see the Easy Fancybox FAQ for reference. This attribute is optional.
The width attribute sets the width of the popup box. You can specify any number here. Numbers are the only characters accepted. This attribute is optional.
The height attribute sets the height of the popup box. You can specify any number here. Numbers are the only characters accepted. This attribute is optional.
Use unitw and unith to set the units of measure used for width and height. Valid units are px, em, rem and %. This attribute is optional.
Example 3: Vimeo Player
[easyfbox box="1" class="hentry"]<iframe src="https://player.vimeo.com/video/127958989" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>[/easyfbox] [easypopper box="1"]Watch This[/easypopper]
Example 4: YouTube Player
[easyfbox box="2" class="hentry"]<iframe width="420" height="315" src="https://www.youtube.com/embed/qchPLaiKocI" frameborder="0" allowfullscreen></iframe>[/easyfbox] [easypopper box="2"]Watch Get Down on It[/easypopper]
Known conflicts
Some caching plugins prevent Easy FancyBox from working. If your popups don’t work, disable your cache or configure your cache to work nicely with Easy FancyBox.
Various other plugins affect how shortcodes work. I will fix those compatibility issues one day. For most sites, the shortcodes will work great.
The future of this plugin
I might update the plugin to integrate it with more of the features provided by WordPress Easy Fancybox. That upgrade might not be soon.
wpDiscuz