iLightBox · Revolutionary Lightbox Plugin

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.
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.
Why the script doesn't work?
Make sure you don't have multiple versions of jquery in your page. Look at the source view in your browser to see what jquery scripts you are loading.

For example:
```
<script src="crazy_path/jquery.js" type="text/javascript"></script>
...
<script src="crazy_path/jquery.min.js" type="text/javascript"></script>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
```
jquery.js and jquery.min.js are the same script. Delete both and keep only one.

How to automatically start iLightBox on page load?

Simply add the following code:

<script type="text/javascript">
  jQuery(document).ready(function(){
  
    jQuery.iLightBox([
      {
        URL: "image.jpg"
      }
    ]);

  });
</script>

How to create multiple galleries using "rel" attribute?

Call script bellow:

<script type="text/javascript">
  jQuery(document).ready(function(){

    (function(){
      var groupsArr = [];
      $('[rel^="ilightbox["]').each(function () {
        var group = this.getAttribute("rel");
        $.inArray(group, groupsArr) === -1 && groupsArr.push(group);
      });
      $.each(groupsArr, function (i, groupName) {
        $('[rel="' + groupName + '"]').iLightBox({ /* options */ });
      });
    })();

  });
</script>

Then use rel=”ilightbox[GALLERY_NAME]” attribute in your links.

<a href="image.jpg" rel="ilightbox[GALLERY_NAME]">SHOW IMAGE</a>

Where:

GALLERY_NAME = The name of the gallery

Why Flash objects appear through overlay?

By default Flash will overlay any HTML content. This can be prevented by setting the 'wmode' param and embed attribute to 'transparent'.

For more information from Adobe Support

AC_FL_RunContent( 'codebase', 'http...', 'pluginspage', 'http...',  'wmode', 'transparent', 'width', '99', 'height', '99', 'src', 'flash/player', 'quality', 'high' );

var so = new SWFObject("player.swf", "player", "99", "99", "9", "#222222");
so.addParam("allowfullscreen", "true");
so.addParam("allowScriptAccess", "always");
so.addParam("wmode","transparent");

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http..." width="999" height="999">
  <param name="movie"   value="flash/player.swf" />
  <param name="quality" value="high" />
  <param name="wmode"   value="transparent" />
  <embed src="flash/player.swf" wmode="transparent" width="999" height="999" quality="high" pluginspage="http..." type="application/x-shockwave-flash"></embed>
</object>

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.
iLightBox doesn't look the same when I use it on my website.
This could be because ilightbox.css is not included or the images are not uploaded. It also happens when your own CSS is conflicting with ilightbox.css. Make sure you target elements in your CSS without setting things global, code like li { display: inline; } for example is bad practice when you use third party code like iLightBox. When your CSS is properly coded and all the required files are uploaded and included you should have no problem implementing iLightBox.
How can I open iLightBox from inside a Flash movie?
In your Flash movie you need to use getURL to call your custom callback function, like so:
```
getURL("javascript:jQuery.iLightBox([{URL:'image.jpg'}])");
```

How I can use JW Player to play MP4 files?

Use this code:

<a href="player.swf" data-options="width: 480, height: 340, flashvars: { file: 'movie.mp4', stretching: 'exactfit' }" id="ilightbox">PLAY VIDEO</a>

Where:

player.swf = path of the JWPlayer
movie.mp4 = path of the movie file

How I can optimize my page to recognize by iLightBox?

iLightBox parse meta tags in target page then recognize the type of the page in 2 ways:

1. The Open Graph protocol.

2. The specific meta tag that only will be parsing with iLightBox:

<meta property="ilightbox:options" content='"url": "http://example.com/URL/of/the/file.jpg", "thumbnail": "http://example.com/URL/of/the/thumbnail.jpg"' />

<meta property="ilightbox:options" content='"url": "http://example.com/URL/of/the/movie.swf", "thumbnail": "http://example.com/URL/of/the/thumbnail.jpg", "type": "flash", "width": 1280, "height": 720' />

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 open /src/css/ilightbox.css file and remove below code:
```
.ilightbox-noscroll {
	overflow: hidden;
}
```

How to close the iLightBox after a Vimeo clip has ended?

First you need download and include froogaloop.min.js JS file to your HTML page from GitHub: https://github.com/vimeo/player-api/tree/master/javascript

<script type="text/javascript" src="/src/js/froogaloop.min.js"></script>

Second you need to add api=1 to Vimeo video URL query string. e.g.

http://player.vimeo.com/video/VIDEO_ID?api=1

Then use callbacks and vimeo events:

jQuery(function ($) {
  $('#vimeo').iLightBox({
    callback: {
      onShow: function (api) {
        var iframe = $('iframe', api.currentElement)[0],
            player = $f(iframe);

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent('ready', function () {
          player.addEvent('finish', function () {
            api.hide();
          });
        });
      }
    }
  });
});

How to embed a facebook video?

You need to use below URL for your link URL

https://www.facebook.com/video/embed?video_id=VIDEO_ID

Where:

VIDEO_ID = The facebook video ID

How to make images switch to next one by clicking on it?

You need to insert below code to your page source to add this feature.

<script>
  jQuery(document).ready(function($){
    $(document).on('click', '.ilightbox-holder:not(.ilightbox-next, .ilightbox-prev)', function(){
      iLightBox.moveNext();
    });
  });
</script>