Introduction
Use fancy lightbox 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.
Installation
The extension can be installed in different ways.
The preferable way for free version:
- Login to admin area of your WordPress site and open "Plugins → Add New" page.
- Enter "ARI Fancy Lightbox" in "Search Plugins" box and search the plugin.
- Click "Install Now" button for "ARI Fancy Lightbox" plugin.
- Click "Activate" link after successful plugin installation.
An alternative way #1 (preferable for version):
- Download ari-fancy-lightbox.zip (or ari-fancy-lightbox-pro.zip for PRO version) archive here.
- Login to admin area of your WordPress site and open "Plugins → Add New" page.
- Click "Upload Plugin" button, use "Browse" button to select the downloaded archive with the plugin and click "Install now" button.
- Click "Activate" link after successful plugin installation.
An alternative way #2:
- Download ari-fancy-lightbox.zip (or ari-fancy-lightbox-pro.zip for PRO version) archive here.
- Unzip it to a folder on your local machine.
- Connect your server (where WordPress is installed) by FTP.
- Copy ari-fancy-lightbox folder from the archive to [wordpress_folder]/wp-content/plugins folder on the server.
- Login to admin area of your WordPress site and open "Plugins → Installed Plugins" page.
- 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. |
| NextGEN Galleries | |
|
It is possible to use "ARI Fancy Lightbox" with NextGEN galleries. The plugin adds "ARI Fancy Lightbox" option to "What effect would you like to use?" drop-down on "Lightbox Effects" tab on "Gallery → Other Options" page.
One note, the plugin will work with NextGEN galleries which support lightbox effect. For example it will not work with "NextGEN Basic Thumbnails" gallery if "Use imagebrowser effect" parameter is enabled in gallery settings because in this case NextGEN disable lightbox effect. This parameters section is available only if NextGEN plugin is installed.
|
|
| 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>
|
| Navigate between attachments | If it is enabled, navigation between images which are attached to the same post will be available into the lightbox. |
| Custom grouping selectors |
Use this parameter if want to show navigation into the lightbox for elements based on CSS selectors. For example if want to show show navigation for all links with my-album CSS class, populate the parameter with the following value:
A.my-album
|
| Disable right click | If the parameter is enabled, mouse right click will be disabled on images into the lightbox to avoid copy of image URL. |
| Get title from EXIF data | If a title is not specified and image contains EXIF data, the plugin will try to get title from EXIF data. |
| Convert file name to title | If title is not specified, file name will be used for this purpose. |
| Smart title | It is used with "Convert file name to title" parameter. The plugin will try to convert file name to more human-readable format. |
|
WooCommerce
This parameters section is available only if WooCommerce plugin is installed.
|
|
| Attach to product images | If the parameter is enabled, WooCommerce product images will be opened into the lightbox. The plugin supports WooCommerce 2.x and 3.x |
| 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). |
| Enable | If the parameter is enabled, Facebook share button will be shown. |
| 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. |
| Enable | If the parameter is enabled, Pinterest share button will be shown. |
| 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. |
| 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
|
| Hide links | If the parameter is enabled, value of "href" attribute for all lightbox links will be replaced with "#" to hide real links. |
"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]
|
| 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.