1. Installing plugin

There are few ways to install WP Pro Lightbox plugin. The most common ones are the two below.

1.1. WordPress plugin installer

After you download the package please unzip it first. You will get a directory, in which you will find a file named ‘wp-pro-lightbox.zip’. Now you have to login to the WordPress admin panel of your site. Got to ‘Plugins->Add New’. Then click on the Upload Tab. You will see a screen like the one below. Browse for the ‘wp-pro-lightbox.zip’ I have mentioned above and upload it. You will be taken to the activate a plugin page just like this one: Make sure that you click on Activate the plugin, now you have installed the WP Pro Lightbox plugin.

1.2. Installing using FTP

After you download the package please unzip it first. You will get a directory, in which you will find a file named ‘wp-pro-lightbox.zip’. Unzip this file. You will see the ‘wp-pro-lightbox’ directory. Now you need to log in to your host with the FTP manager. Access the folder site-root-folder/wp-content/plugins/ And upload the whole unzipped directory there. You must make sure that you upload the unzipped folder. Once you have uploaded, then you would need to click on the Plugins tag in your WordPress admin panel. Search for WP Pro Lightbox plugin. Click on the Activate button and you are done. You can start creating your first pricing table.

2. Initial plugin configuration

There are some settings you need to set up globally for all Lightboxes. These can be found in Plugin Settings and are as follows.

2.1. Set Appearance

WordPress Pro Lightbox plugin allows you to set one of few available apearences.  There are following options available Choose Lightbox skin

There are some skins available to choose for you lightboxes. Each skin is representend by an image showing how it looks. To choose a skin, just click on an image.

Show element name

With this option you can decide if you would like the element name to be diplayed next to it

Show element description

Turn this on to show element description below the displayed element.

Transition type

When switching between the elements in a lightbox you can decide how the previous disapears and how the next ones apprears. You have 2 options to choose:

  • fade
  • slide

Transition easing

When you choose slide transition type you can choose easing for it. For more information please refer to following link ->http://easings.net/

Transition speed

You can decide how much time will the transition take (how fast it happens). Please mind that time should be in miliseconds (1000ms=1s).

Show thumbnails

Turn this on to have thumbnails of all elements displayed. This will make navigation easier and show user what is comming.

Thumbnails position

The thumbnails can be positioned below the displayed element or above.

Force slide size

Initially displayed element is scaled to fit the screen. But for some reasons you may want it to be exact size or scale it to bigger/smaller.

Fixed position

There are some skins available to choose for you lightboxes. Each skin is representend by an image showing how it looks. To choose a skin, just click on an image.

Initially fit to screen

When on, element is scaled to fit the screen. When off, the element has it’s original dimantions.

Keep icons inside lightbox

When ON, all control icons are inside the displayed element. When OFF the icons are outside of the elemenet’s borders.

Overlay opacity

Lightbox overlay is always black. But you can set it’s opacity. Accepted values are from 1 (no transparency) to 0 (fully transparent).

2.2. Set slider options

If your lightbox has many elements they can be displayed one by one. This is done with a slider functionality. Therefore WordPress Pro Lightbox plugin has some settings you can adjust slider functionality with.

Infinite loop

Infinite loop means that when viewing last element and clicking ‘next’ first element will be displayed. When this is off, the ‘next’ button is disabled when viewing last slide.

Autoplay

Turn this ON and elements will automatically change after certain period of time.

Pause time

When ‘Autoplay’ is ON you can decide how much time has to pass to change to next element. Please mind that time should be in miliseconds (1000ms=1s).

Pause on hover 

When ON this function prevents ‘Autoplay’ when a coursor is over displayed element.

2.3. Set misc options

Modal

When this function is ON, clicking on an overlay will close the lightbox.

Scrollable

Turning this ON will allow users to switch between elements using mouse scroll wheel.

Touch enabled

Turning this ON will allow users to switch between elements using touch swipe on touch devices.

3. Creating new lightbox

3.1. Adding new lightbox

To add a new lightbox go to WPP Lightbox in your Admin Panel naviagtion. You will be navigated to your list of lightboxes. Please find the “Add lightbox” box which is at the end of the lightbox list. If you have a lot of lightboxes added, you do not need to scroll down to find the box. Please click the button “Add lighbox” under page title, and you will be directed to the box. Please click somewhere inside “Add lightbox” box and enter the lightbox name in the field that shows up. Finally click “Add lightbox” button and your new lightbox will show up on the page.

3.2. Few words on the lightbox box (This lightbox is, Preview, Delete , Edit)

Each lightbox on a list is represented by a box this box. The image at the top Each lightbox box at the very top has an image. When you create a new lightbox it will be a placeholder indicating this lightbox has no elements. When you add some elements to your lightbox  this image will be the thumbnail of your first elemenet. If the first element does not have any thumbnail added, then this image will be a placeholder showing the type of the first element. Lightbox name Lightbox name is only for your convinience. It will not be displayed anywhere on the frontend side. It is just to help you know what this lightbox is about. Some stats Next to lightbox name there are two numbers. The one at the top (bigger one) shows how many times the lightbox has been opened during the last 30 days. The smaller number below is a precentage value showing how the upper value changed comapring to the same previous period. ON/OFF switch Each box has a ON/OFF switch. When the switch is set to OFF, it means this lightbox is off and it will not work. As a result :

  • If you use the shortcode, it will not display anything
  • If you set lightbox to appear on page load/leave, it  will not popup
  • If you set a lightbox trigger using DOM sellector, it simply will not work.

Buttons at the bottom At the very bottom of the lightbox box are 3 buttons

  • Edit :: This button will take you to Lightbox edit page (described later)
  • Preview :: This button will open the lightbox allowing you to preview it. You will be taken to Lightbox edit page before lightbox will be displayed. This is because of performance reasons.
  • Delete :: This button allows you to delete the lightbox. You will be asked to confrim this operation.

4. Configuring the Lightbox

Each lightbox takes most of the settings from plugin settings which are described in point 2. of this documentation. However it is possible to overwrite some plugin settings for specific lightbox. In your admin panel go to WPP Lightbox -> click “Edit” on desired lightbox -> click “Other Settings” tab. On this tab you have some settings available, which will overwrite “Plugin Settings” for this specific lightbox.

5. Adding content to Lightbox

Adding content to Lightbox is done using “Content Elements”. A content element could be for example an image or a video. If you add more then one Content Element to a Lightbox then users that will open the lightbox will be able to switch between Content Elements in the same way as in sliders.

5.1. Add Lightbox content element

To add a Lighbox Content element in the Lightbox edit page click the “Content elements” tab. Find the “Add element” box which is at the end of the elements list.

If you have a lot of elements added, you do not need to scroll down to find the box. There is an “Add element” button right under the tabs. After clicking either the button or the box, you will be directed to a “Add lightbox form”. Here you can define what the element should be. You have following options there:

5.1.1. Element name

This will be the name displayed under the element in the opened lightbox (you can turn it off in Lightbox settings) and on the element box.

5.1.2. Element description

The description will be displayed under the Element name in the opened lightbox (you can turn it off in Lightbox settings). Some part of the description will be displayed on the Element box.

5.1.3 Element content

From this dropdown you can choose what whould you like this element to be. You have following possibilities: Image from WordPress Media Library ::  This option allow you to choose any image from your WordPress Media Library Video  from WordPress Media Library :: This option allow you to choose any video from your WordPress Media Library. This includes Image from a Link :: Just put a link here to some image on the web and it will be displayed. WPP Lightbox accepts links to:

  • png or jpeg images
  • Instagram
  • Twitpic

Video from a Link :: Just put a link here to some video on the web and it will be displayed. WPP Lightbox accepts links to:

  • mp4 files
  • YouTube
  • Vimeo
  • Screenr
  • Metacafe
  • DailyMotion
  • Telly (formerly Twitvid)

Iframe :: put a link to display it in iframe. Please mind this should be a link and not whole iframe code. On below examples the red prat is the one you should paste in the field. Here is what you can do:

  • Youtube

  • Google Maps
  • Any website  (just link to the website)
  • Flash file  (just link to the file)
  • PDF (just link to the file)
  • Slideshare presentation
  • WordPress editor :: Here you can use the regular WordPress editor to insert:

    • Some formatted text with photos
    • Shortcodes :: Shortcodes allow you to put some interactive content to Lightbox. This could be
      • Login/Signup/Register
      • Forms
      • Ads
      • Portfolio/Imges/Videos grids
      • Pricing Tables
      • Testimonials
      • Team Showcases There are limitless possibilities!
    • HTML/CSS

    5.1.4. The content

    This field depends on your previous choice. it can be:

    • a button to open WordPress Media Library
    • a field to insert the link
    • a WordPress editor field

    5.1.5. Force content element size

    You can make a single slide to have different size then others. This setting will overwrite default plugin and lightbox settings.

    5.1.6. Element thumbnail

    There is a possibility to add a custom thumbnail to each element. This is particularly useful when using thumbnail navigation in your lightbox. When you fill in all the fields, please click “Save” button and your Content element will be added.

    5.2. The element box

    Each Lightbox Content Element is represented by Element Box. It is very similar to Lightbox Box on the lightbox list. The Content Element Box consists of the following parts: The image at the top Each Element Box at the very top has an image. It is the thumbnail of your the elemenet. If the Element does not have any thumbnail added, then this image will be a placeholder showing it’s type. Element name Element name is here for your convenience.  It is just to help you know what this Element is about.  It will also be displayed in the lightbox under the Content element, unless you decide to turn this function off in the “Other Settings” tab. Element description Element description is here for your convenience.  It is just to help you know what this Element is about.  It will also be displayed in the lightbox under the Content element, unless you decide to turn this function off in the “Other Settings” tab. ON/OFF switch Each Element Box has a ON/OFF switch. When the switch is set to OFF, it means this element is off and it will not be displayed. Buttons at the bottom At the very bottom of the Element Box are 3 buttons

    • Edit :: This button will show Element edit section below the Element Box. The section basically has the same fields as “Add Element” section.
    • Preview :: This button will open the lightbox allowing you to preview this very single Element.
    • Delete :: This button allows you to delete the Element. You will be asked to confirm this operation.

    5.4. Set elements sequence

    You can set the order in which the elements will appear in the lightbox. Simply on the Elements list drag and drop them to achieve the desired sequnce.

    5.6. Bulk add elements

    6. Inserting Lightbox to pages

    There are 3 ways you can insert the lightbox to a post/page/custom post type. You can use all 3 on a single lightbox. They are as follows:

    6.1. Shortcode

    This is the most simple way. At a very top you have a shortcode (red one) which is unique for each Lightbox. You can insert it in any content and display a link/button or image that will trigger the lightbox. You can use the same shortcode in many times even on different pages. First decide if you would like to open the lightbox using the image or link/button. Link/Button If you choose link/button, then you will be able to enter it’s text. Next you can use the Quick CSS  field to style the link to look better, or style it to look like a button. If you have no idea how, try copying the code below and inserting between ‘{‘ and ‘}’ in the Quick CSS field.

    margin-right:10px;
    width:100px;
    background:#34495e;
    border-bottom: #2c3e50 3px solid;
    border-left: #2c3e50 1px solid;
    border-right: #2c3e50 1px solid;
    border-radius:6px;
    text-align:center;
    color:white;
    padding:10px;
    float:left;
    font-size:12px;
    font-weight:800;

    Image If you choose  to use the image,

    6.3. DOM selector

    This is a really powerful method of  inserting the lightbox to a page. Using DOM selector you can bind the lightbox trigger to nearly any existing element of your website by just pointing it. The element you point can exist on multiple pages. This is why you need to first choose post type and/or specific pages you would like it to work on. Once you do it, you need to insert a DOM selector in the proper field. Do not know how to do it? Read this article.

    6.2. Page load/leave

    If you would like a lightbox to display on page load/leave, just choose if it should be load or leave and on which post types/pages. Thats it!

    7. Viewing stats

    WordPress Pro Lightbox provide extensive statistics, allowing you to check how your lightboxes perform. This allows you to optimize your lightboxes and lightboxes content, to make sure they get proper attention.

    7.1. Quick stats view

    In order to get some quick view on the stats and compare lightbox performance between each other. When you are on lightbox list (Admin Panel -> WPP Lightbox), check the numbers next to lightbox title. The one on the top shows how many times lightbox has been opened in the past month (ie 10th of June to 9th of July). The one on the bottom in percents shows how the value above differs for same previous period ( 10th of May to 9th of June). If the difference is negative the percentage value is red and if it is positive it is green.

    7.2. Access the detailed stats

    To access the detailed stats from admin panel go to WPP Lightbox ->Edit respective lightbox -> “Stats” tab.

    7.4. Charts types

    When you are on the detailed stats screen you can see 2 charts one below another. The first chart shows how many times the lightbox has been open over time. The second one shows how many % of the elements has been viewed in average

    7.3. Change time period

    When you are on the detailed stats screen you can change how far into the past you would like to see. There are 3 options availabe:

    • Past month – Charts will show you how
    • Past 24 weeks
    • Past 12 months