pagetitle: Sexy Lightbox
-
tagline: An attractive lightbox jquery plugin.
-
menu: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="active">About</a></li> <li><a href="@root_path/projects">Back to desbest's projects</a></li> </ul> </div>
-
content: <h1>Installation</h1>
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:

<textarea>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
 
<script type="text/javascript" src="sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
</textarea>

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:

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

<h1>How to use?</h1>
To use Sexy Lightbox 2 is easy! just add the property rel=”sexylightbox” to your links:

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

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

<textarea>
<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>
</textarea>

There is no limit in the galeries quantity.

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

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

<textarea>
<a href="http://www.yoursite.com/view.php" rel="sexylightbox">
Link 1
</a>
</textarea>

 The correct way is specifying the height and width:

<textarea>
<a href="http://www.yoursite.com/view.php?width=400&height=200" rel="sexylightbox">
Link 1
</a>
</textarea>

<h2>Iframe</h2>

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

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

HTML content and Images support the following parameters:

<h2>modal</h2>

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

<textarea>
<a href="image.jpg?modal=1" rel="sexylightbox">Link 1</a>
</textarea>

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

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

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

<h1>Documentation</h1>
The following options are available for the class creation:

<h2>Background Styles</h2>

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

<h2>LightBox Styles</h2>
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.
<p><b>color</b></p>
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”.

<textarea>
SexyLightbox.initialize({color:'white'});
</textarea>

<p><b>emergefrom</b></p>
It admits: “top” or “bottom”. By default it uses “top”. If you want the lightbox display “from bottom” use “bottom”.

<textarea>
SexyLightbox.initialize({emergefrom:'bottom'});
</textarea>

<p><b>find</b></p>
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”.

<textarea>SexyLightbox.initialize({find: 'lightbox'});</textarea>

<h1>Example Configuration</h1>
<textarea>
$(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
}
});
});
</textarea>

<p><b>dir</b></p>
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.

<textarea>
SexyLightbox.initialize({dir: 'folderimages'});
</textarea>

<h1>Functions</h1>
You can access to the lightbox from javascript, thru the following functions:

<h2>close</h2>
Close the lightbox (if is open).
<textarea>
SexyLightbox.close();</textarea>

<h2>shake</h2>
<textarea>
SexyLightbox.shake();</textarea>

<h2>refresh</h2>
<textarea>
SexyLightbox.refresh();</textarea>
<h2>display</h2>
<p><b>display(url, title, force)</b></p>

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

<textarea>SexyLightbox.display('images/mysql.jpg');</textarea>

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

<h1>Known Issues</h1>
<h2>Animated gifs doesn’t work in Opera</h2>
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.

<h2>The flash object is shown over the “overlay”</h2>
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:

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

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

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

<textarea>
<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" width="999" height="999" quality="high" pluginspage="http..." type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</textarea>

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

<p>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.</p>
<p>Make sure you’re not using Prototype.</p>
<p>Make sure the images are where you think they are.</p>

<h1>License</h1>
The script is published under the MIT license.

<h1>Version</h1>
Sexy Lightbox 2.3.4

-
rightside: <div style="margin-left: 7%;">

<div class="dragaction"><a href="http://desbest.com/sexy-lightbox-demo">Demo (black)</a> </div>

<div class="dragaction"><a href="http://desbest.com/sexy-lightbox-demo/index-white.html">Demo (white)</a> </div>

<div class="dragaction"> <a href="https://gitlab.com/desbest/sexy-lightbox">Download</a> 

</div></div>
-
footer: Sexy Lightbox 2.3.4 is made by Eduardo D. Sada and is released under the MIT license.
-