jQuery Lightbox Evolution

Documentation

By aeroalquimia

If you have any question that are beyond the scope of this help file, please feel free to join the discussion or email me via my user page contact form. Thanks so much!

Table of Contents

Installation
Support
Frequently Asked Questions
Changelog
Support Notes

Installation Back to top

  1. First, make sure you are using valid DOCTYPE
  2. Include the jQuery library, the lightbox CSS file and the lightbox javascript in the head of the page(s) where you want to use the Lightbox. 
    <script type="text/javascript" src="js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" />
<![endif]-->

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

    Where default is the design that you have chosen, and can be:

    • default
    • white-green
    • carbono
    • facebook
    • minimalist
    • minimalist-dark
    • classic
    • classic-dark
    • evolution
    • evolution-dark
  3. Then, initialize the plugin. Put the following code before the closing tag of your body 
    <script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>
  4. Next you need to tell which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a class="lightbox" attribute to each link. For example, say you have this link to an image on your page: 
    <a href="image.jpg">My Image</a>

    In order to set up this link for use with Lightbox, simply change it to this:

    <a href="image.jpg" class="lightbox">My Image</a>

    That's it! Clicking on this link should now open up the image in Lightbox.

  5. If you would like to display a title for your image, simply add a title attribute to the link.

Support Back to top

This plugin supports the following browsers:

Quirks mode is not supported in any browser, but that doesn't necessarily mean that it won't work. This means that you need to use either a strict or transitional DOCTYPE in order to use Lightbox.

Frequently Asked Questions Back to top

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

    Yes. Your license includes the rights to use the script on any one website at a time. If you'd like to use the script as part of a service, please consider purchasing an Extended License.

  2. Can I make modifications to this script?

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

  3. 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 jscripts 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.6/jquery.min.js"></script>

    jquery.js and jquery.min.js are the same script. Delete the last one if you can. Keep only one.

  4. The shadow overlay doesn't stretch to cover full browser window.

    Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.

  5. How to automatically start Lightbox on page load?

    Simply add the following code:

    6. <script type="text/javascript">
  jQuery(document).ready(function($){
  
    $.lightbox("image.jpg");

  });
</script>
  6. 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', 'images/home', 'quality', 'high' );

    var so = new SWFObject("home.swf", "home", "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="images/home.swf" />
  <param name="quality" value="high" />
  <param name="wmode"   value="transparent" />
  <embed src="images/home.swf" wmode="transparent" width="999" height="999" quality="high" pluginspage="http..." type="application/x-shockwave-flash"></embed>
</object>
  7. Lightbox 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">
  8. How can I open Lightbox 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.lightbox('image.jpg')");
  9. How can I open Lightbox in parent window from inside an iframe?

    First thing you need to do is install the script in your parent window, but don't initialize it. Don't use jQuery(document).ready, instead, add the code below:

    <script type="text/javascript">
  function frameload(iframe) {
    var doc = iframe.contentWindow || iframe.contentDocument;
    if (doc.document) { doc = doc.document; };
    
    jQuery('.lightbox', doc.body).lightbox();
  };
</script>

    Insert onload="frameload(this);" in your iframe markup.

    <iframe src="iframe_child.html" onload="frameload(this);" width="500" height="500"></iframe>

    When you click an image in the child page, the lightbox will be displayed in your parent page. Remember to remove the script in your child page to avoid any problem.

  10. Any plans for making it available for Wordpress?

    Click !

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

    Use this code:

    <a href="player.swf?file=testmovie.mp4&stretching=exactfit&lightbox[width]=480&lightbox[height]=340" class="lightbox">PLAY VIDEO</a>

    Where:

    player.swf = path of the JWPlayer
testmovie.mp4 = path of the movie file
  12. I don't like the fancy animation. Can I disable it?

    Yes.

    <script type="text/javascript">
$.extend(true, $.lightbox().options, {
  animation: {
    show: {
      duration: 400,
      easing  : "swing"
    },
    close: {
      duration: 200,
      easing  : "swing"
    },
    move: {
      duration: 400,
      easing  : "swing"
    }
  }
});
</script>

    If you want to use another animation effect, add this file [jquery.easing.1.3.js] to your page and replace "swing", in the previous code, with any easing option which starts with "easeOut".

Changelog Back to top

1.8.0 (Ago 17 2013)
* jQuery 2.0 compatible
* JW Player 6 compatible

1.7.3 (Feb 24 2013)
* Fixed multiple galleries bug.
* Added youku.com video server.
* Fixed '__flash__removeCallback' is undefined error in all versions of IE.

1.7.2 (Feb 21 2013)
* Fixed data-options bug with malformed JSON.

1.7.1 (Feb 17 2013)
* Now you can change the duration of the transition "loading".
  
1.7.0 (Jan 25 2013)
* Added retina support to default theme.
* Added retina support to evolution theme.
* Added retina support to carbono theme.
* Changed default animation. Now is a little less funny.
* Added maximized param.
* Fixed move param.
* Now autoresize=false only deactivate the max/min button.
* Fixed '__flash__removeCallback' is undefined error in IE9.
* Added preloading images in the gallery.
* Added ajax options.
* Added max size of videos, if the size is not defined by the user.
* Removed GoogleVideos and Gametrailers video servers.
* Dropped support for jQuery 1.3.
* Added maps.google.co.uk support.

1.6.10 (Oct 10 2012)
* Fixed Resize bug.

1.6.9 (Aug 12 2012)
* Added ratio param.
* Improved regex of image detection.
* Added Adobe Director support.
* Fixed Chrome bug scroll with percentages.
* Added compatibility jQuery 1.8.0
* Fixed IE7 Bug buttons div doesn't hide when is empty.

1.6.8 (Jul 05 2012)
* Fixed IE7/IE8 Bug.

1.6.7 (Jul 03 2012)
* Fixed title is undefined.

1.6.6 (Jun 30 2012)
* Added maxsize option.
* Fixed esqueleto.move opacity bug.
* All gallery system was changed.
* More examples added.

1.6.5 (May 28 2012)
* Fixed bug on custom buttons.

1.6.4 (May 20 2012)
* Fixed Dual script calling on Chrome 9+.
* Changed context of onOpen event.
* Critical: Changed the name of some properties.

1.6.3 (Apr 29 2012)
* Fixed scrollbars bug with Right-To-Left text.

1.6.2 (Apr 17 2012)
* Fixed IE9 Iframe 'feature' AKA Bug.

1.6.1 (Apr 06 2012)
* Added youtu.be detection.
* Fixed youtube videos don't play on iOS.

1.6.0 (Apr 01 2012)
* Fixed calculation of the size on iOS.
* Added better events on iOS.

1.5.8 (Feb 04 2012)
* Fixed 'evolution' and 'evolution-dark' theme.
* Fixed Maximize bug on IE.
* Fixed Calculate function.

1.5.7 (Jan 27 2012)
* Added a better mobile device detection.
* Fixed gallery bug.
* Removed Megavideo embed code.

1.5.6 (Dec 21 2011)
* Fixed 'evolution' and 'evolution-dark' theme.
* Fixed New Google Maps detection.

1.5.5 (Oct 14 2011)
* Fixed iPhone/iPad window height bug.
* Added iPhone/iPad rotation event.
* Turned off animations for iPhone/iPad.
* Removed logo from youtube videos.
* Added 'carbono' theme.
* Added 'minimalist-dark' theme.
* Added 'facebook' theme.
* Images can now be downloaded.
* All CSS files were changed.
* Fixed gallery mode with force=image param.

1.5.4 (Oct 07 2011)
* Show loading icon on HTML mode. CSS files were changed.
* Fixed a gallery problem with brackets rel="a[1]".

1.5.3 (Oct 01 2011)
* Fixed gallery bug.

1.5.2 (Sep 28 2011)
* Fixed IE6/7/8 Bug.

1.5.1 (Sep 27 2011)
* Bug fixed wrong overflow with animations on IE6.
* Added allowTransparency="true" to iframes.
* Fixed Black Screen of Death on Youtube and IE8.

1.5.0 (Sep 14 2011)
* Gallery bug fixed.
* Updated jQuery version to 1.6.4.

1.4.9 (Sep 12 2011)
* Gallery mode fixed when you open the lightbox in a parent window from an iframe.
* Added support to HTML code created "on the fly".
* Google Maps fixed.

1.4.8 (Jun 30 2011)
* New Google Maps version.

1.4.7 (Jun 16 2011)
* Fixed custom buttons bug.
* Trigger onOpen event with images.

1.4.6 (Jun 12 2011)
* Fixed custom buttons bug.
* Removed isEmptyObject function.
* The size for loading image doesn't change in the gallery mode anymore.

1.4.5 (May 12 2011)
* Added compatibility with Cufón.
* OnOpen and OnClose events.
* Use "animate" function instead of "morph" on jQuery 1.6
* New CollegeHumor embed code.

1.4.4 (Apr 17 2011)
* Fixed a gallery problem with brackets rel="[1]".
* Removed the loading image when the image is loaded.
* Removed margin and padding for flash objects.
* Upgraded to jQuery 1.5.2

1.4.3 (Mar 09 2011)
* Changed Youtube and Vimeo videos to iframe.
* Added Vzaar.com video support.

1.4.2 (Jan 04 2011)
* Now you can navigate the gallery using the left and right arrows on the keyboard.
* Now the Gallery mode is only available with images.

1.4.1 (Dic 28 2010)
* Fixed compatibility issue with jQuery 1.4.1

1.4.0 (Dic 25 2010)
* Added transition options.
* Added "move" param.
* Added "flashvars" param.
* You can use % in width and height.
* Fixed bug with flash in Chrome 7 and 8.
* Fixed zIndex in Default and White-Green themes.
* Fixed bug in 'minimalist' theme.
* Added 'evolution' theme.
* Added 'evolution-dark' theme.

1.3.6 (Oct 30 2010)
* Fixed IE8 bug
* Fixed bug with GIF images.
* The "resize" function doesn't reload the content anymore.

1.3.5 (Oct 26 2010)
* Fixed IE8 bug.

1.3.4 (Oct 09 2010)
* Fixed empty title bug.

1.3.2 (Sep 18 2010)
* Added videopress.com video support.
* Fixed IE7 Bug.

1.3.1 (Sep 06 2010)
* Fixed compatibility issue with jQuery 1.3

1.2.5 (Ago 26 2010)
* Fixed Safari line-height bug.

1.2.4 (Ago 21 2010)
* Fixed bug scrollbars in iframes and videos.

1.2.3 (Ago 19 2010)
* Fixed bug sometimes closing lightbox doesn't hide the background.
* Added jQuery version detection.
* Added 'classic-dark' theme.

1.2.2 (Ago 16 2010)
* Restore 'maximize' button when you click on gallery buttons.
* Added 'minimalist' theme.

1.2.1 (Ago 10 2010)
* Fixed 'shake' function.
* Added 'classic' theme.

1.2 (Ago 02 2010)
* Added megavideo.com video support.
* Added gametrailers.com video support.
* Added collegehumor.com video support.
* Added ustream.tv video support.
* Added twitvid.com video support.
* Fixed bug in Overlay when the lightbox closes.
* Show hidden inline content.
* Fixed slow animation with Internet Explorer.
* Added compatibility to .tiff images.
* Added iframe support.
* Added Google Maps and Bing Maps support.

1.1 (Jul 28 2010)
* Keyboard events are now handled.
* Overflow bug in html content fixed.

1.0 (Jul 11 2010)
* First release.

Support Notes Back to top

To be able to help solve a problem quickly, please read the entries below. I will do my best to assist you. I provide a full range of technical support except:

  1. I don't support 3rd-party code (external plugins, javascripts, flash players, etc.). In those cases you have to contact the authors.
  2. I don't support errors provoked by the strong modification of the original packages.
  3. I don't customize the packages in personal way.
  4. If you sure that your improvement ideas will be helpful to others, please don't hesitate to share it with me. Most likely that it will became a free package update.

If you have a more general question relating to scripts on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section. Once again, thank you so much for purchasing this plugin.

aeroalquimia (Eduardo Daniel Sada)
Buenos Aires, Argentina. Jul 2010