Thanks for purchasing iLightBox for WordPress. If you have any questions that are beyond the scope of this help file, you've found a bug, need new feature, or you just want me to show your website using this plugin, please feel free to email me via contact form on my profile.

To get notified about plugin updates or my new releases follow me on Twitter or become a fan of my facebook page.

# Summary

iLightBox allows you to easily create the most beautiful overlay windows using the jQuery Javascript library.

By combining support for a wide range of media with gorgeous skins and a user-friendly API, iLightBox aims to push the Lightbox concept as far as possible.

# Installation

There are two ways to intall iLightBox:

#### WordPress Plugin Uploader

You can install iLightBox via the WordPress plugin uploader without unzipping the file.

1. Log into your WordPress admin panel
2. Navigate to Plugins > Add New
3. Click Upload
4. Click Choose File and select the `ilightbox-upload.zip` file.
5. Click Install Now.

#### FTP

You can also install iLightBox via FTP

1. Extract the .zip file you downloaded from CodeCanyon.
2. Find the `ilightbox` folder (this directory is created when you unzip the file).
3. Upload the `ilightbox` folder to your `wp-content/plugins` directory.
4. Navigate to your Control Panel: Plugins
5. Under iLightBox, click Activate

Once you install the plugin, you'll get new Menu Item in the Admin Panel

That's it! iLightBox should now be ready for use.

# Usage

See the jQuery documentation for more on it, this section will cover just the WordPress approach.

The easiest way to use iLightBox is by adding the attribute `rel="ilightbox"` to a link.

    <a href="image.jpg" rel="ilightbox">Show image</a>

### Embedding

There are three ways to embed iLightBox into your site - using shortcode, using php function, or bind it on elements.

#### Shortcode

Use shortcode to insert the gallery.

    [ilightbox id="7" columns="4" class="custom_class"][/ilightbox]

To create an inline gallery use shortcode with some content.

    [ilightbox id="7"]<b>Show Inline Gallery</b>[/ilightbox]

To insert multiple galleries.

    [ilightbox ids="0,1,2,3" columns="2"][/ilightbox]

Use Gallery Shortcode to insert the gallery (Refer to Gallery Shortcode).

    [gallery ids="729,732,731,720" order="DESC" orderby="ID" columns="4" size="medium" link="file"]

#### PHP Function

Use php function to insert the gallery.

    <?php echo get_ilightbox( array( "id" => 7, "columns" => 4, "class" => "custom_class" ) ); ?>

OR

    <?php echo do_shortcode( '[ilightbox id="7" columns="4" class="custom_class"][/ilightbox]' ); ?>

To create an inline gallery use php function with content attribute.

    <?php echo get_ilightbox( array( "id" => 7 ), "<b>Show Inline Gallery</b>" ); ?>

OR

    <?php echo do_shortcode('[ilightbox id="7"]<b>Show Inline Gallery</b>[/ilightbox]'); ?>

To insert multiple galleries via PHP function.

    <?php echo get_ilightbox( array( "ids" => "0,1,2,3", "columns" => 2 ) ); ?>

OR

    <?php echo do_shortcode( '[ilightbox ids="0,1,2,3" columns="2"][/ilightbox]' ); ?>

#### Bind

Attach a gallery to an event for the elements. For get more information about this option refer to jQuery Bind.

Bind button available on thumbnails when the mouse is over on them.

To attach a gallery to `double click` event for the `document`:

To attach a gallery to `click` event for the site title link element:

# Manage

Here are details about gallery options and fields.

### GENERAL OPTIONS

#### Path

Sets path for switching windows, the default is 'vertical'.

#### Skin
string

Sets the skin, the default is 'dark'. Available skins are: `dark`, `light`, `parade`, `smooth`, `metro-black`, `metro-white` and `mac`.

#### Link ID
string

Sets the deeplinking id. This feature only works when you directly inserted the gallery.

#### Start From
number

The position to open within the elements, defaults to `0`.

#### Infinite
boolean

Sets the ability to infinite the group, the default is `OFF`.

#### Random Start
boolean

The random position to open within the elements, the default is `OFF`.

#### Keep Aspect Ratio
boolean

Sets the resizing method used to keep aspect ratio within the viewport, the default is `ON`.

#### Mobile Optimizer
boolean

Make lightboxes optimized for giving better experience with mobile devices, the default is `ON`.

#### Max Scale
number

Sets the maximum viewport scale of the content, the default is `1`.

#### Min Scale
number

Sets the minimum viewport scale of the content, the default is `0.2`.

#### Inner Toolbar
boolean

Bring buttons into windows, or let them be over the overlay with set to `ON`, the default is `OFF`.

#### Smart Recognition
boolean

Sets content auto recognize from web pages, the default is `OFF`.

#### Fullscreen Viewport

Sets the resizing method used to fit content within the fullscreen mode.

#### Fullscreen Stretch Types
string

Sets the stretch resizing used to fit content within the fullscreen mode for specific content types. Possible values are: `image`, `video`, `flash`, `iframe`, `inline`, `ajax` and `html`. The default is '`flash, video`'.
Separate them by comma.

#### Show Title
boolean

Sets the titles of all slides will be visible or not, the default is `ON`.

#### Mobile Optimization
boolean

By turning on this option your custom optimizations for mobile devices will be apply, the default is `OFF`.

#### Tablet Optimization
boolean

By turning on this option your custom optimizations for tablet devices will be apply, the default is `OFF`.

### COMMANDS

#### Overlay Blur
boolean

Determines whether or not clicking on the dimmed background of the page hides the iLightBox and removes the dim, the default is `ON`.

#### Toolbar
boolean

Sets buttons be available or not, the default is `ON`.

#### Fullscreen
boolean

Sets the fullscreen button, the default is `ON`.

#### Arrow Buttons
boolean

Enable the arrow buttons, the default is `OFF`.

#### Thumbnails
boolean

Sets the thumbnail navigation, the default is `ON`.

#### Keyboard
boolean

Sets the keyboard navigation, the default is `ON`.

#### Mouse Wheel
boolean

Sets the mousewheel navigation, the default is `ON`.

#### Swipe
boolean

Sets the swipe navigation, the default is `ON`.

### KEYBOARD

#### Left Key
boolean

Sets the `Left` key for keyboard navigation to moving to previous window, the default is `ON`.

#### Right Key
boolean

Sets the `Right` key for keyboard navigation to moving to next window, the default is `ON`.

#### Up Key
boolean

Sets the `Up` key for keyboard navigation to moving to previous window, the default is `ON`.

#### Down Key
boolean

Sets the `Down` key for keyboard navigation to moving to next window, the default is `ON`.

#### Esc Key
boolean

Sets the `Escape` key for keyboard navigation to close iLightBox, the default is `ON`.

#### Shift+Enter Key
boolean

Sets the `Shift+Enter` key for keyboard navigation to enter fullscreen, the default is `ON`.

### STYLES

#### Overlay Opacity
number

Sets the opacity of the dimmed background of the page, the default is `0.85`.

#### Page Offset X
number

Determines page X offset from browser edge, the default is `0`.

#### Page Offset Y
number

Determines page Y offset from browser edge, the default is `0`.

#### Next Offset X
number

Determines next window X offset from browser edge, the default is `45`.

#### Next Offset Y
number

Determines next window Y offset from browser edge, the default is `0`.

#### Next Opacity
number

Determines next window opacity, the default is `1`.

#### Next Scale
number

Determines next window scale, the default is `1`.

#### Previous Offset X
number

Determines previous window X offset from browser edge, the default is `45`.

#### Previous Offset Y
number

Determines previous window Y offset from browser edge, the default is `0`.

#### Previous Opacity
number

Determines previous window opacity, the default is `1`.

#### Previous Scale
number

Determines previous window scale, the default is `1`.

#### Thumbnails Max Width
number

Sets a maximum width of the thumbnails, the default is `120`.

#### Thumbnails Max Height
number

Sets a maximum height of the thumbnails, the default is `80`.

#### Thumbnails Normal Opacity
number

Sets the opacity of the thumbnails, the default is `1`.

#### Active Thumbnail Opacity
number

Sets the opacity of the active window thumbnail, the default is `0.6`.

### EFFECTS

#### Show Effect
boolean

Determines whether or not showing contents with effect, the default is `ON`.

#### Hide Effect
boolean

Determines whether or not hiding contents with effect, the default is `ON`.

#### Reposition
boolean

Determines whether or not browser resize with effect, the default is `ON`.

#### Show Speed
number

Sets the speed of the effect when showing contents, the default is `300`.

#### Hide Speed
number

Sets the speed of the effect when hiding contents, the default is `300`.

#### Reposition Speed
number

Sets the reposition effect speed, the default is `200`.

#### Switch Speed
number

Sets the speed for switching effect between windows, the default is `500`.

#### Loaded Fade Speed
number

Sets the fade effect speed for loaded contents, the default is `180`.

#### Fade Speed
number

Sets the fade effect speed, the default is `200`.

### CAPTIONS

#### Start
boolean

Determines whether or not display captions on window preview, the default is `ON`.

#### Show Event
string

Sets the event for showing caption, the default is `'mouseenter'`.

#### Hide Event
string

Sets the event for hiding caption, the default is `'mouseleave'`.

### SOCIALS

#### Start
boolean

Determines whether or not display social buttons on window preview, the default is `ON`.

#### Show Event
string

Sets the event for showing social buttons, the default is `'mouseenter'`.

#### Hide Event
string

Sets the event for hiding social buttons, the default is `'mouseleave'`.

#### Buttons
object

Sets the social buttons.

    {
      facebook: true,
      twitter: true,
      googleplus: true,
      reddit: true,
      digg: true,
      delicious: true
    }

You can customize buttons in your personal way:

    {
      facebook: {
        URL: "http://example.com/path/",
        text: "Share it on your Timeline"
      },
      twitter: true
    }

And also you can add another custom button:

    {
      custom_button: {
        source: "http://example.com/share?url={URL}",
        text: "Share on Custom Button",
        width: 720,
        height: 420
      }
    }

### SLIDESHOW

#### Enable
boolean

Enable the slideshow feature and button, the default is `OFF`.

#### Pause Time
number

Delay between cycles in milliseconds, the default is `5000`.

#### Pause On Hover
boolean

Whether to pause the cycling while the mouse is hovering over the lightboxes, the default is `OFF`.

#### Start Paused
boolean

When slideshow is enabled, this will start the iLightBox in paused mode, the default is `ON`.

### Callbacks

#### onAfterChange
function

A function to call when the window changes.

    function(api, position) {
      $(api.currentElement).css({ opacity: .5 });
      alert("You've reached position " + position);
    }

#### onAfterLoad
function

A function to call when the content loads.

    function(api, position) {
      alert('Event "onAfterLoad" fired for item ' + position + '.');
    }

#### onBeforeChange
function

A function to call before the window changes.

    function(api) {
      alert('Event "onBeforeChange" fired.');
    }

#### onBeforeLoad
function

A function to call before the content loads.

    function(api, position) {
      alert('Event "onBeforeLoad" fired for item '+position+'.');
    }

#### onEnterFullScreen
function

A function to call when the iLightBox enter to Fullscreen.

    function() {
      alert('Event "onEnterFullScreen" fired.');
    }

#### onExitFullScreen
function

A function to call when the iLightBox exit from Fullscreen.

    function() {
      alert('Event "onExitFullScreen" fired.');
    }

#### onHide
function

A function to call when the window hides.

    function() {
      alert('Event "onHide" fired.');
    }

#### onOpen
function

A function to call when the iLightBox opens.

    function() {
      alert('Event "onOpen" fired.');
    }

#### onRender
function

A function to call when the content renders.

    function(api, position) {
      alert('Event "onRender" fired for item ' + position + '.');
    }

#### onShow
function

A function to call when the window comes into view.

    function(api, position) {
      $(api.currentElement).css({ 'background': '#C00' });
      alert('Event "onShow" fired for item ' + position + '.');
    }

### Manage your slides

On the right column, in this section, you can add your slides by clickig the "Add a slide" button. After adding a slide you can start customizing it.

The first field is for adding source for slide. You can upload it or select it from the media library by using the camera thumbnail beside of the field.

### OPTIONS

#### Link
string

Sets a link to another URL for thumbnail.

#### Type
string

Specifies the media type. Required when the type cannot be detected based on the urls file extension. One of: `image`, `video`, `flash`, `iframe`, `inline`, `ajax` or `html`

#### Thumbnail
string

Sets a thumbnail image for use with the thumbnail controls. Images have a thumbnail based on their source image by default, this option can be used to set an alternative. For every other type this option will have to be set to generate a thumbnail.

#### Icon

It possible to set an icon type to overlay the thumbnail.

#### Caption
string HTMLElement

The caption underneath the content.

#### Title
string HTMLElement

The title above the window.

#### Skin
string

Sets the skin. Available skins are: `dark`, `light`, `parade`, `metro-black`, `metro-white` and `mac`.

#### Custom Class
string

Sets the custom class for thumbnail in gallery grid overlay.

#### Width
number

Sets a maximum width of the content.

#### Height
number

Sets a maximum height of the content.

#### Fullscreen Viewport

Sets the resizing method used to fit content within the fullscreen mode.

#### Mouse Wheel

Enables or disables the mousewheel navigation, the default is `ON`.

#### Swipe

Enables or disables the swipe navigation, the default is `ON`.

#### Social Buttons
object

Sets the social buttons.

    {
      facebook: true,
      twitter: true,
      googleplus: true,
      reddit: true,
      digg: true,
      delicious: true
    }

You can customize buttons in your personal way:

    {
      facebook: {
        URL: "http://example.com/path/",
        text: "Share it on your Timeline"
      },
      twitter: true
    }

And also you can add another custom button:

    {
      custom_button: {
        source: "http://example.com/share?url={URL}",
        text: "Share on Custom Button",
        width: 720,
        height: 420
      }
    }

#### Ajax
object

Allows extra options to be set when using ajax as your media type. For get more information about this option refer to jQuery.ajax().

    {
      type: 'post',
      data: { id: 14, page: 7 }
    }

    { data: 'id=14&page=7' }

#### HTML5 Video
object

Allows extra options to be set when using HTML5 Video.

    {
      h264: '/path/video.mp4',
      webm: '/path/video.webm',
      ogg: '/path/video.ogg',
      poster: '/path/video-poster.jpg',
      controls: false,
      autoplay: true,
      preload: 'auto'
    }

#### Flashvars
object

Sets flashvars on a flash movie using key/value pairs.

    {
      file: 'video.mp4',
      autostart: true
    }

#### HTML
HTMLElement

Sets HTML Contents when you choose HTML type.

    <div class="center">
      <h2>
        <img src="http://iprodev.com/ilightbox/assets/img/smile.gif">
        It's time to upgrade.
      </h2>
      <hr>
      <p>iLightBox supports DOM elements created on the fly.</p>
    </div>

#### onAfterLoad
function

A function to call when the content loads.

    function(api) {
      $(api.element).css({ opacity: .5 });
      alert("You've reached position " + api.position);
    }

#### onBeforeLoad
function

A function to call before the content loads.

    function(api) {
      alert('Event "onBeforeLoad" fired for item '+api.position+'.');
    }

#### onRender
function

A function to call when the content renders.

    function(api) {
      alert('Event "onRender" fired for item '+api.position+'.');
    }

#### onShow
function

A function to call when the window comes into view.

    function(api) {
      $(api.element).css({ 'background': '#C00' });
      alert('Event "onShow" fired for item '+api.position+'.');
    }

# FAQ

1. Can I use this script on my client's website?

   Yes. Your license includes the rights to use the script on a website (commercial, personal, client), or intranet site project.

2. Can I make modifications to this script?

   Feel free to make any modifications you need. Also feel free to blog about it and show your friends, but please do not redistribute the script with your changes.

3. Why the script doesn't work?

   If you get javascript error, similiar to - `Object [object Object] has no method iLightBox`, so very likely you've got two or more jQuery scripts on one page, one of your plugins or theme itself is adding it incorrectly. jQuery in WordPress should be added only with `wp_enqueue_script('jquery');`.

4. iLightBox is positioned incorrectly or behaving strangely in Internet Explorer

   This is likely a doctype issue. This plugin requires a valid doctype and rendering in quirks mode is not supported. Make sure you are using the full doctype declaration to insure rendering in standards mode.

   This abbreviated doctype renders the document in quirks mode for Internet Explorer:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

   The doctype with URI renders in standards mode for all browsers:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   I recommend using the HTML5 doctype.

5. How I can use JW Player to play MP4 files?

   Upload and select the player SWF file in new slide then use this code in `Flashvars`:

       { file: 'movie.mp4', image: 'preview.jpg', stretching: 'exactfit' }

   Where:

       movie.mp4 = URL of the movie file
       preview.jpg = URL of the movie preview image file

6. How I can create HTML5 Video Cross-Browser Support?

   Upload and select the movie MP4 file in new slide then use this code in `HTML5 Video` field:

       { webm: 'movie.webm', poster: 'poster.jpg' }

   Where:

       movie.webm = URL of the webm format of the movie file
       poster.jpg = URL of the movie poster image file

7. Why when the iLighBox opens, the page moves to right?

   It's because iLightBox will remove the scrollbar when its opens. If you want to disable this feature you need to go to ilightbox plugin folder in your WP plugins folder and open `css/src/css/ilightbox.css` file then remove below code:

       .ilightbox-noscroll {
           overflow: hidden;
       }

8. How can i group image links that i added to posts?

   You need to use `rel="ilightbox[groupname]"` attribute. You need to use unique group name for each lightbox group. e.g.

       Image 1
       Image 2

   Where:

       IMAGE.JPG = The URL of the image file
       GROUPNAME = The name of grouped lightboxes

# Changelog

- 1.6.6: Added: NextGEN Pro Gallery compatibility.
  Fixed: Some bugs and new improvements.

- 1.6.5: Optimized: For `Justified Image Grid` Gallery Images.
  Optimized: For `FooGallery` Gallery Images.
  Fixed: open lightbox issue for nextGen gallery.
  Fixed: Some bugs and new improvements.

- 1.6.4: Added: iLightBox jQuery version 2.2.4.
  Added: `Masonry Layout` for galleries created with iLightBox.
  Added: `Gallery Thumbnail Size` to galleries to set the thumbnail size for gallery grid.
  Added: `Use Attachment Fields` to galleries to use attachments title and caption fields as lightbox title and caption if available.
  Fixed: Some bugs and new improvements.

- 1.6.3: Fixed: Some bugs and new improvements.

- 1.6.2: Optimized: For WooCommerce Single Product Gallery Images.
  Added: iLightBox jQuery version 2.2.3.
  Fixed: Some bugs and new improvements.

- 1.6.1: Optimized: Galleries deep-linking.
  Optimized: Galleries caption detection.
  Added: Import/Export page.

- 1.6.0: Optimized: Galleries activating method.
  Optimized: Galleries & image/video links with ajax themes.
  Added: iLightBox jQuery version 2.2.1.
  Added: Cache feature to drop database requests and speed up page load.
  Added: "Once" feature for binded galleries to run just once.
  Fixed: Some bugs and new improvements.

- 1.5.8: Fixed: multiple lightbox issue when another lightbox plugin is activated.
  Fixed: multiple lightbox issue for nextGen & jetPack gallery.

- 1.5.7: Fixed: errors when DEBUG_MODE is on.
  Fixed: errors when activating the iLightBox.

- 1.5.6: Added: iLightBox jQuery version 2.2.0.

- 1.5.5: Added: iLightBox jQuery version 2.1.8.
  Fixed: Some bugs and new improvements.

- 1.5.4: Fixed: Uninstalling function.

- 1.5.3: Fixed: Uninstalling function.

- 1.5.2: Fixed: Multiple file upload.
  Fixed: Errors in debug mode.

- 1.5.1: Added: NextGEN Gallery compatibility.

- 1.5.0: Optimized: Ajax actions.
  Optimized: Multiple file upload and insert media.
  Added: iLightBox jQuery version 2.1.5.
  Added: Jetpack compatibility.
  Added: Multisite compatibility.
  Added: `Use Configuration Options` to galleries to use options from configurations page as default options for galleries.
  Fixed: Some bugs behaviour server configurations.

- 1.4.0: Added: iLightBox jQuery version 2.1.0.

- 1.3.7: Added: iLightBox jQuery version 2.0.2.
  Added: `Fullscreen One Slide` option.
  Fixed: Configurations page saving settings.

- 1.3.6: Fixed: Inline gallery shortcode.
  Fixed: Inline gallery shortcode binder.

- 1.3.5: Optimized: Mobile & Tablet Optimizations.
  Added: iLightBox jQuery version 2.0.
  Added: `Custom Class` option.
  Added: `ids` attribute for shortcode to insert multiple galleries.
  Fixed: ADDITIONAL STYLES option.

- 1.3.3: Added: `Mobile Optimization` option.
  Added: Shortcode accept in HTML field.

- 1.3.2: Added: iLightBox jQuery version 1.4.1.
  Fixed: Import media bug.

- 1.3.1: Optimized: UTF-8 Globalization.
  Added: iLightBox jQuery version 1.4.0.

- 1.3.0: Optimized: Creating new gallery.
  Fixed: Insert new slide.

- 1.2.9: Optimized: Some security essentials.
  Added: Multiple file uploader.
  Added: Admin bar menu.
  Added: Native support for Gallery Shortcode.
  Added: Live preview button for thumbnails.
  Added: `Enable on Videos Links` option.
  Added: `Enable on Video Pages Links` option.
  Added: `Enable on Gallery Shortcode` option.
  Fixed: Conflict scripts and styles with other plugins.
  Fixed: Some bugs in jQuery 1.7.x.
  Fixed: Some bugs in Configurations.
  Fixed: Gallery in feed page.

- 1.0: Initial release of iLightBox for WordPress.

# Credits

- jQuery jQuery is a fast, small, and feature-rich JavaScript library. Here is the official site: http://jquery.com/.

- jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Here is the official site: http://jqueryui.com/.

- jQuery Easing Plugin A jQuery plugin from GSGD to give advanced easing options. Here is the official site: http://gsgd.co.uk/sandbox/jquery/easing/. Consider a donation please

- CodeMirror CodeMirror is a JavaScript component that provides a code editor in the browser. Here is the official site: http://codemirror.net/. Consider a donation please

- Fine Uploader The Fine Uploader attempts to achieve a user-friendly file-uploading experience over the web.. Here is the official site: http://fineuploader.com/. Consider a donation please

- URI.js URI.js is a javascript library for working with URLs. Here is the official site: http://medialize.github.com/URI.js/.

- $.serializeObject `$.serializeObject` is a variant of existing `$.serialize` method which, instead of encoding form elements to string, converts form elements to a valid JSON object which can be used in your JavaScript application.. Here is the official site: https://github.com/hongymagic/jQuery.serializeObject.
- PHP Mobile Detect `PHP Mobile Detect` The lightweight PHP class for detecting mobile devices. Here is the official site: http://mobiledetect.net/.