An attractive lightbox jquery plugin.

Installation

Upload all Sexy LightBox 2 files to your host. The images, CSS and Javascript, if you locate the images folder in a different directory you should change the path in the “dir” parameter in the class.

Write the following code between the HEAD tag in your page:

Atention: To save bandwidth, you can use the compressed version of SexyLightBox, you should to include the file “sexylightboxv.2.3.jquery.min.js”

Finally, add the following code just below of the last lines:

</p> <script type="text/javascript"> $(document).ready(function(){ SexyLightbox.initialize(); }); </script> <p>

How to use?

To use Sexy Lightbox 2 is easy! just add the property rel=”sexylightbox” to your links:

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

Optional: Use the “title” property if you want to show a description for the image.

The keyword “sexylightbox” can be changed with the “find” property. Read the section General config to learn how to do it.

If you want to create a galery from a links group, you should include the gallery name between brackets in the property “rel”:

There is no limit in the galeries quantity.

There are 3 ways to show HTML content in the lightbox:

AJAX

This is the default way. Parameters “width” & “height” are required: The following code will not work:

The correct way is specifying the height and width:

Iframe

Besides the “width” and “height” you should pass the parameter “TB_iframe”: <a href="http://www.yoursite.com/view.php?TB_iframe=1&width=400&height=200" rel="sexylightbox"> Link 1 </a>

Inline

The link should start with “#TB_inline?inlineId=ID” where ID is the id of wrapper who has the HTML to show. </p> <div id="MyHTML"> Example </div> <p><a href="#TB_inline?inlineId=MyHTML&height=125&width=350" rel="sexylightbox"> Link 1 </a>

HTML content and Images support the following parameters:

modal

Setting modal=1 the lightbox will be close only clicking the button “close”, disabling the click event to overlay

background

Set the background color to the lightbox. Very useful when the HTML content loaded has a different background than white. <a href="#TB_inline?inlineId=MyHTML&height=125&width=350&background=#00FF00" rel="sexylightbox">Link 1</a>

title

Show a legend below the content or image. Using this method it’s not possible insert html in the legend. <a href="imagen.jpg?title=Verano del 98" rel="sexylightbox">Link 1</a>

The SexyLightbox class is very flexible. Read the following documentation to view all available options.

Documentation

The following options are available for the class creation:

Background Styles

OverlayStyles

The css style is for the black background (it’s fade). You can change the color and the opacity. SexyLightbox.initialize({ OverlayStyles:{ 'background-color':'#fff', 'opacity': 0.6 } });

LightBox Styles

Sexy Lightbox has two releases, the white and a black one. By default, it uses the black, but you can configure it to use it with white.

color

It admits: “black”, “white”, “blanco” or “negro”. By default it uses “black”. This option is used to locate images that will be used in the directory “sexyimages”.

SexyLightbox.initialize({color:'white'});

emergefrom

It admits: “top” or “bottom”. By default it uses “top”. If you want the lightbox display “from bottom” use “bottom”.

SexyLightbox.initialize({emergefrom:'bottom'});

find

Keyword used to search in the links where lightbox is going to be applied. By default is used “sexylightbox”. This option allows you to create different instances of lightbox and it can use each one in different links. Also, it allows the compatibility with the original lightbox, the keyword is “lightbox”.

SexyLightbox.initialize({find: 'lightbox'});

Example Configuration

$(document).ready(function(){ SexyLightbox.initialize({ find : 'sexylightbox', // rel="sexylightbox" color : 'negro', dir : 'http://www.yoursite.com/images/', emergefrom : 'bottom', OverlayStyles : { 'background-color': '#FF0000', 'opacity' : 0.3 } }); });

dir

Name of the directory that contains the images style. In this directory, you can found the colors directory (black and white). If you want to rename or relocate this directory in another folder, you should change this property.

SexyLightbox.initialize({dir: 'folderimages'});

Functions

You can access to the lightbox from javascript, thru the following functions:

close

Close the lightbox (if is open). SexyLightbox.close();

shake

SexyLightbox.shake();

refresh

SexyLightbox.refresh();

display

display(url, title, force)

Opens the lightbox in the url sent. The “force” parameter (force=’image’), forces to show the lightbox as an image.

SexyLightbox.display('images/mysql.jpg');

SexyLightbox.display('images/captcha.php', '', 'image'); SexyLightbox.close();

Known Issues

Animated gifs doesn’t work in Opera

It’s an Opera’s problem, that doesn’t fire the “onload” event when the gif is loaded. Nevertheles, once the gif is stored in cache, the event is fired correctly, so the image is shown with no problems. In other words, it doesnt have a solution.

The flash object is shown over the “overlay”

To solve this, you have to change the property wmode to transparent or opaque. If you are using Adobe’s script, you should have something like:

AC_FL_RunContent( 'codebase', 'http...', 'pluginspage', 'http...', 'width', '999', 'height', '999', 'src', 'images/home', 'movie', 'images/home', 'quality', 'high', 'wmode', 'transparent' ); //end AC code

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

If not, you are using the flash object as it is, you should have something like: Notice that “wmode” is included in the embed and as “param”

Overlay opens but previous, next, and/or close links are missing

Make sure the files are actually on the server where you think they are, then double check the links in your header. Using absolute links (”http://…”) may help sort out buggy relative paths.

Make sure you’re not using Prototype.

Make sure the images are where you think they are.

License

The script is published under the MIT license.

Version

Sexy Lightbox 2.3.4

Demo (black)

Demo (white)

Download