ARI Fancy Lightbox

Full-featured mobile friendly lightbox WordPress plugin.


Introduction

The plugin uses Fancybox library to bring lightbox effect to WordPress sites. Use fancy popup to show images from native WordPress galleries, photos, videos from YouTube, Vimeo, Dailymotion, Vine, Metacafe services, Google Maps links, external pages.

The plugin is easy to use and mobile friendly, just select in plugin settings what media items be showing into the popup.

The features or sections which are related only to "PRO" version are marked with badge.

Let's start to play with the plugin and install it.

Purchase process and subscription plans

This section only for PRO version. "ARI Fancy Lightbox PRO" is a commercial plugin and it requires to buy a subscription to get access to the extension.

We offer several subscription plans, you get the plugin with all features for any plan, the only difference between them in number of sites where the extension can be installed. All subscriptions are valid for unlimited period of time, it means pay only once and get access to all updates and support without any limits.

To purchase the plugin, choose an appropriate plan here and click "Buy" button. You will be redirected to "ARI Soft" site where check the selected plan and click "CHECKOUT" link, register (or login if have an account on our site), after this click "Confirm Order" button to confirm the order and then click "Click here to complete the order »" button and will be redirected to 2CheckOut site.

All payments on our site are handled by 2CheckOut payment gateway. It accepts credit cards and PayPal payments. After a payment, you will be redirected to "ARI Soft" site and receive a confirmation email, and can download the plugin in Member Area.

The next step is installation of the extension.

Installation

The extension can be installed in different ways.


The preferable way for free version:

  1. Login to admin area of your WordPress site and open "Plugins → Add New" page.
  2. Enter "ARI Fancy Lightbox" in "Search Plugins" box and search the plugin.
  3. Click "Install Now" button for "ARI Fancy Lightbox" plugin.
  4. Click "Activate" link after successful plugin installation.

An alternative way #1 (preferable for version):

  1. Download ari-fancy-lightbox.zip (or ari-fancy-lightbox-pro.zip for PRO version) archive here.
  2. Login to admin area of your WordPress site and open "Plugins → Add New" page.
  3. Click "Upload Plugin" button, use "Browse" button to select the downloaded archive with the plugin and click "Install now" button.
  4. Click "Activate" link after successful plugin installation.

An alternative way #2:

  1. Download ari-fancy-lightbox.zip (or ari-fancy-lightbox-pro.zip for PRO version) archive here.
  2. Unzip it to a folder on your local machine.
  3. Connect your server (where WordPress is installed) by FTP.
  4. Copy ari-fancy-lightbox folder from the archive to [wordpress_folder]/wp-content/plugins folder on the server.
  5. Login to admin area of your WordPress site and open "Plugins → Installed Plugins" page.
  6. Click "Activate" link for "ARI Fancy Lightbox" plugin to active it.

When the plugin is installed and activated, "ARI Fancy Lightbox" link will appear in main menu for administrators (if multisite mode is not used on your WordPress site) or for super-administrators (if multisite mode is enabled).

Now open ARI Fancy Lightbox screen to configure the plugin.

Update

The extension supports automatic update which is a core feature of WordPress. The plugin will be updated automatically in a background or show an alert when a new version is available and offer to update the plugin by press a confirm button. This behavior depends on configuration of your WordPress site. More information about automatic updates is available here.

The extension can also be updated manually, for this download the latest version of the extension here, uninstall the previous version of the plugin and install a new one like described in installation section or login to your server by FTP, delete [wordpress_folder]/wp-content/plugins/ari-fancy-lightbox folder and copy content of ari-fancy-lightbox.zip archive to [wordpress_folder]/wp-content/plugins.

version requires an API key to enable automatic updates. For this open Member Area page and copy "API Key".
After this open "Update" tab on "ARI Fancy Lightbox" page on backend of your WordPress site and paste the API key to "API key" parameter and save settings.
The plugin will check available updates each 2 hours and show notifications about new versions.

System requirements

The extension is compatible with WordPress 4.0+ and requires PHP 5.4+.

Admin area

The plugin adds "ARI Fancy Lightbox" menu item to main menu on WordPress admin part. By default the plugin is available for administrators (if multisite mode is not used on your WordPress site) or for super-administrators (if multisite mode is enabled).

Click by the menu item to configure the plugin.

Admin Area - ARI Fancy Lightbox

Plugin settings are configured on this page.

Click "Save Changes" button at the bottom of the page to save changes after configuration all options.

This page is available for users with granted manage_options permission if multisite mode is disabled in WordPress and only for super-administrators in multisite mode.

The parameters are separated by the following tabs:

  • Integration contains parameters to configure what links are showing into the lightbox
  • Lightbox contains parameters which are used to configure lightbox settings
  • Share contains parameters which are used to configure share button
  • Style contains parameters to change style parameters (opacity, background color and etc.)
  • Advanced contains advanced parameters for plugin fine tuning
  • Update enter an API key to enable auto-updates

"Integration" tab

See description of each parameter below:

Parameter Description
WordPress Galleries
Convert WordPress galleries Enable this parameter if want to open items from native WordPress galleries into the lightbox.
Navigate between items Activate this parameter to enable navigation between items into the lightbox.
Images
Convert links to images When the parameter is enabled, links to images will be opened into the lightbox.

If the parameter is enabled and "Convert WordPress galleries" is disabled, gallery images will not be opened into the lightbox.

For example the following sample links will be opened into the lightbox:

<a href="upload/photo1.jpg">My photo</a>

<a href="http://domain.com/photo1.png"><img src="thumb.gif" /></a>
YouTube videos
Convert YouTube links When the parameter is enabled, links to YouTube videos will be opened into the lightbox.

For example the following sample links will be opened into the lightbox:

<a href="https://www.youtube.com/watch?v=WjoTuHPeSBY">Video tutorial</a>

<a href="https://youtu.be/WjoTuHPeSBY"><img src="video_preview.jpg" /></a>
Auto-play If the parameter is enabled, the video will be started automatically when lightbox is opened.
Show fullscreen button If the parameter is enabled, the fullscreen button will be shown in video toolbar.
Show related video If the parameter is enabled, the related videos will be shown at the end of video.
Vimeo videos
Convert Vimeo links When the parameter is enabled, links to Vimeo videos will be opened into the lightbox.

For example the following sample links will be opened into the lightbox:

<a href="https://vimeo.com/76979871">Vimeo video</a>

<a href="https://player.vimeo.com/76979871"><img src="video_preview.jpg" /></a>
Auto-play If the parameter is enabled, the video will be started automatically when lightbox is opened.
Show fullscreen button If the parameter is enabled, the fullscreen button will be shown in video toolbar.
Metacafe videos
Convert Metacafe links When the parameter is enabled, links to Metacafe videos will be opened into the lightbox.

For example the following sample links will be opened into the lightbox:

<a href="http://www.metacafe.com/watch/3166904/very_funny_talking_cats/">Metacafe video</a>

<a href="http://www.metacafe.com/watch/3166904/"><img src="video_preview.jpg" /></a>
Dailymotion videos
Convert Dailymotion links When the parameter is enabled, links to Dailymotion videos will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="http://www.dailymotion.com/video/x1d97q7_funny-cats-videos_animals">Dailymotion video</a>
Auto-play If the parameter is enabled, the video will be started automatically when lightbox is opened.
Vine videos
Convert Vine links When the parameter is enabled, links to Vine videos will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="https://vine.co/v/53EpO9u1qTz">Vine video</a>
Instagram content
Convert Instagram links When the parameter is enabled, links to Instagram items will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer" title="Sample title">Instagram image</a>
Google Maps links
Google Maps links When the parameter is enabled, Google Maps links will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z">Open location</a>
PDF files
Convert PDF links When the parameter is enabled, PDF documents will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="reports/report.pdf">Open PDF doc</a>
Local PDF files Enable this parameter to open local PDF documents (from current domain) into the lightbox.
Local PDF viewer The selected PDF viewer will be used for local PDF files.
External PDF files Enable this parameter to open external PDF documents (not from current domain) into the lightbox. Documents will be opened into iframe and use browser's PDF viewer. It is not possible to use PDFJS viewer for external files due to security policy.
Open links with target="_blank" attribute
Convert links When the parameter is enabled, links with target="_blank" attribute will be shown into the lightbox.

For example the following sample link will be opened into the lightbox (if "External links" parameter is enabled):

<a href="http://www.ari-soft.com" title="ARI Soft" target="_blank>ARI Soft site</a>

and the following link will be opened into the lightbox (if "Internal links" parameter is enabled):

<a href="2017/01/19/hello-world/" title="My post" target="_blank>Post from my site</a>
Internal links Enable this parameter to open internal links (for current domain) into the lightbox.
External links Enable this parameter to open external links (not for current domain) into the lightbox.
Open external links into lightbox
Convert links When the parameter is enabled, links to external pages (external sites) will be opened into the lightbox.

For example the following sample link will be opened into the lightbox:

<a href="http://www.ari-soft.com" title="ARI Soft">ARI Soft site</a>

"Lightbox" tab

See description of each parameter below:

Parameter Description
Animation speed (ms) Specify duration of animation in milliseconds.
Slideshow pause (ms) Specify pause in milliseconds before showing the next slide in slideshow mode.
Loop navigation Enable infinite gallery navigation.
Space between slides (px) Horizontal space between slides.
Close on outside click Close the lightbox when clicked outside of the content.
Keyboard navigation When keyboard navigation is enabled, users can navigate between slides and close the lightbox using keyboard.
Enable gestures Enable gestures (tap, zoom, pan and pinch).
Focus the first element Try to focus on first focusable element after opening.
Show info bar Show/hide information about slides (number of slides, current slide index, navigation arrows).
Show buttons Show/hide information about slides (number of slides, current slide index, navigation arrows).
Slideshow button Show/hide slideshow button.
Fullscreen button Show/hide fullscreen button.
Thumbnails button Show/hide button to open thumbnails toolbar.
Close button Show/hide close button.

"Share" tab

See description of each parameter below:

Parameter Description
Facebook integration
Facebook app ID If app ID is not defined, it will not be possible to define title, description and image for sharing content and integrate the plugin with Facebook comment plugin.
Load Facebook SDK This parameter is used, only if "Facebook" share button is enabled or Facebook comment plugin is used. If template or another plugin also load Facebook JS SDK, it is possible to disable SDK loading by the plugin to avoid conflicts.
Comments system
Supported types Comments will be shown when the supported type of content is loaded into the ligtbox.
Show on start If the parameter is activated, comments will be loaded automatically when lightbox is opened otherwise the button should be clicked.
Comments system The selected comment engine will be used.
Share buttons
Show share buttons Enable the parameter if want to show share buttons. If the parameter is deactivated, all share buttons (and download button) will be hidden otherwise specific buttons can be hidden using other parameters from this section.
Share link type Specify what link should be shared.

When "Deeplink" option is selected, deeplink for lightbox item will be shared. In this case when this link is opened into a browser, the lightbox with the selected item will be opened automatically.

"Direct item link" option is used if want to show direct link of currently loaded lightbox item. For example image URL, URL of web page which is shown into the lightbox and etc.

When "Current page URL" option is selected, current page URL will be shared.
Ignore types Share buttons will be hidden for the selected content type(s).
Facebook
Enable If the parameter is enabled, Facebook share button will be shown.
Twitter
Enable If the parameter is enabled, Twitter share button will be shown.
Via Attribute the source of a Tweet to a Twitter username.
Google+
Enable If the parameter is enabled, Google+ share button will be shown.
Pinterest
Enable If the parameter is enabled, Pinterest share button will be shown.
LinkedIn
Enable If the parameter is enabled, LinkedIn share button will be shown.
VKontakte
Enable If the parameter is enabled, VK share button will be shown.
E-Mail
Enable If the parameter is enabled, it will be possible to send a link to shared content by email.
Download
Enable If the parameter is enabled, download button will be shown for images.

"Style" tab

See description of each parameter below:

Parameter Description
Overlay background Background color of layer between lightbox and page content.
Overlay opacity Opacity of layer between lightbox and page content. Use float number from 0 to 1.
Thumbnails pane background Background color of toolbar with thumbnails.
Lightbox z-index Value of z-index CSS property of lightbox container. Increase value of the parameter if some lightbox elements are shown under content on a page.
Custom CSS The defined CSS rules will be added on frontend pages. Can be used to resolve style conflicts or change style of lightbox elements.

For example the following CSS rule will change color of captions which are shown into the lightbox:

.fancybox-container .fancybox-caption {color:red}

"Advanced" tab

See description of each parameter below:

Parameter Description
Remove 3rd party plugins When the parameter is enabled, the plugin will try to remove includes of Fancybox jQuery library which are registered by 3rd party plugins.
Disable on mobile Use this parameter if want to disable lightbox on small screens. The parameter is used together with "Breakpoint width" parameter.
Breakpoint width (px) This parameter is used when "Disable on mobile" parameter is enabled. If browser screen width is less than the defined value, the lightbox will be disabled.
Deeplinking When the parameter is enabled, each item from the lightbox will have an unique URL. It is used to open the lightbox with the item when the URL is opened into a browser. A deep link looks like:

http://mysite.com/page.html#!fancybox/bnDjgur/image01.jpg
Deeplink prefix The defined prefix will be added to deep links.

For example if prefix is set to popup value, a deep link will look like:

http://mysite.com/page.html#!popup/bnDjgur/image01.jpg

"Update" tab

See description of each parameter below:

Parameter Description
API key Enter an API key to enable auto-updates. Read in this topic where find the API key.

Other references

This section contains topics which are not covered in other sections of the documentation. How to create translations and etc.

How to create a splash window?

The plugin supports ability to open the lightbox with the defined content on page load. For this user the following shortcode:

[fancybox_open]This content will be shown into the lightbox[/fancybox_open]

It is also possible to use a shortcode in content which should be shown into the lightbox:

[fancybox_open]Insert shortcode: [audio src="audio-source.mp3"][/fancybox_open]

If necessary to show a web page (video from YouTube, Vimeo and etc.), use url parameter in [fancybox_open] tag to specify URL of content which want to show:

[fancybox_open url="https://www.youtube.com/watch?v=WjoTuHPeSBY"] The lightbox can be opened only once, for this add mode="once" parameter to [fancybox_open] tag and define an unique value for key parameter:

[fancybox_open url="https://www.youtube.com/watch?v=WjoTuHPeSBY" mode="once" key="welcome_video"]

All parameters which are possible to use in [fancybox_open] tag in the table below:

Parameter Description
close_after Use it if want to close popup automatically. Specify value in seconds:

[fancybox_open close_after="5"]Hello[/fancybox_open]
delay Use it if want to define a delay in seconds after what the lightbox will be shown:

[fancybox_open delay="3"]Hello[/fancybox_open]
disable_shortcode Use it if want to disable using of shortcodes in lightbox content:

[fancybox_open disable_shortcode="1"]Insert shortcode: [audio src="audio-source.mp3"][/fancybox_open]
key It is used when want to show the lightbox only once. Enter an unique value. It will be used as a key for cookies.
mode Use once value if want to open the lightbox only once.

Use session value if want to open the lightbox only once per browser's session. It means the lightbox will be shown again when browser is closed.

"key" parameter should be defined:

[fancybox_open mode="session" key="test"]Hello again![/fancybox_open]

How to create links via shortcode?

Use [fancybox] shortcode to create a link which will be opened into the lightbox. Use url parameter to define the link which will be loaded into the lightbox. For example:

[fancybox url="http://wp-quiz.ari-soft.com" caption="Best WordPress Quiz Plugin"]Click me[/fancybox]

Specify link text between [fancybox] and [/fancybox] tags. Any HTML code can be used. If want to create an image link, shortcode will look like:

[fancybox url="https://www.youtube.com/watch?v=aOasHPNL1yo"]<img src="http://domain.com/photo.jpg" />[/fancybox]

All parameters which are possible to use in [fancybox] tag in the table below:

Parameter Description
caption Use it to define a caption which will be shown into the lightbox

[fancybox url="http://wp-quiz.ari-soft.com" caption="Best WordPress Quiz Plugin"]Click me[/fancybox]
group The lightbox will provide navigation for items from the same group

[fancybox url="http://wp-quiz.ari-soft.com" caption="Best WordPress Quiz Plugin" group="quiz"]Click me[/fancybox]

[fancybox url="https://www.youtube.com/watch?v=aOasHPNL1yo" group="quiz"]Video[/fancybox]
url This is obligatory parameter. Use it to set link which will be opened into the lightbox.

How to show a custom HTML code into the lightbox?

Wrap content which want to show into the lightbox with <div> HTML tag and add id attribute with unique value and fancybox-hide CSS class. Use value of id attribute in <A> tag which will trigger the lightbox and add ari-fancybox CSS class to the anchor.

Sounds a bit complex? Don't worry, see the sample HTML code below. It is a simple:

<div id="mySampleContent" class="fancybox-hide">This content will be shown into the lightbox</div>
<a href="#mySampleContent" class="ari-fancybox">Open lightbox</a>


or the same with a shortcode:

<div id="mySampleContent" class="fancybox-hide">[audio src="audio-source.mp3"]</div>
<a href="#mySampleContent" class="ari-fancybox">Open lightbox</a>

How to disable lightbox on the selected links?

Just add no-lightbox CSS class to links which want to use without lightbox. A sample code below:

<a href="http://wp-quiz.ari-soft.com" class="no-lightbox">Open link</a>

Translations

The extension is fully translatable. Loco Translate WordPress extension can be used to create new translations. Open "Loco Translate → Plugins" from admin menu and select "ARI Fancy Lightbox" plugin to edit existing or create a new translation.

If you prefer to create translations on your local machine then POEdit application can be used. It is a free and available for different platforms. Use [wordpress_folder]/wp-content/plugins/ari-fancy-lightbox/languages/ari-fancy-lightbox.pot language template file.

Language file should have ari-fancy-lightbox-LANGUAGECODE name. For example en_US language code is used for "English (United States)" language and language file for this language should have ari-fancy-lightbox-en_US name.