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.

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.

There are two ways to intall iLightBox:

WordPress Plugin Uploader

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

FTP

You can also install iLightBox via FTP

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.

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:

Here are details about gallery options and fields.

GENERAL OPTIONS

COMMANDS

KEYBOARD

STYLES

EFFECTS

CAPTIONS

SOCIALS

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

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

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

SLIDESHOW

Callbacks

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

• 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.

• 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/.