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!
<a href="assets/1.jpg" class="lightbox"><img src="assets/m1.jpg" alt=""/></a> <a href="assets/2.jpg" class="lightbox"><img src="assets/m2.jpg" alt=""/></a> <a href="assets/7.jpg" title="Image Description" class="lightbox"><img src="assets/m7.jpg" alt=""/></a>
Galleries are created from elements who have the same "rel" tag.
<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" alt=""/></a> <a href="assets/9.jpg" class="lightbox" rel="group1"><img src="assets/m9.jpg" alt=""/></a> <a href="assets/6.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m6.jpg" alt=""/></a>
Big images are resized to be completely visible
<a href="assets/4.jpg" class="lightbox"><img src="assets/m4.jpg" alt=""/></a> <a href="assets/8.jpg" class="lightbox"><img src="assets/m8.jpg" alt=""/></a>
<a href="assets/3.jpg?lightbox[width]=400&lightbox[height]=200" class="lightbox"><img src="assets/m3.jpg" alt=""/></a> <a href="assets/6.jpg?lightbox[width]=300&lightbox[height]=200" class="lightbox"><img src="assets/m6.jpg" alt=""/></a>
<a href="assets/9.jpg?lightbox[autoresize]=false" class="lightbox"><img src="assets/m9.jpg" alt=""/></a> <a href="assets/4.jpg?lightbox[autoresize]=false" class="lightbox"><img src="assets/m4.jpg" alt=""/></a>
Toggle if clicking the overlay shouldn't close Lightbox.
<a href="assets/5.jpg?lightbox[modal]=true" class="lightbox"><img src="assets/m5.jpg" alt=""/></a>
id="loremipsum" Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque.
Open LoremIpsum | Open LoremIpsum with fixed size (524x178)
<a href="#loremipsum" class="lightbox">Open LoremIpsum</a> <a href="?lightbox[width]=524&lightbox[height]=178#loremipsum" class="lightbox">Open LoremIpsum with fixed size (500x250)</a>
Open Ajax with fixed size (350x170) | Open Video in Modal
<a href="examples/ajax-html.html?lightbox[width]=350&lightbox[height]=170" class="lightbox">Open Ajax with fixed size (350x170)</a> <a href="examples/ajax-video.html?lightbox[width]=610&lightbox[height]=360&lightbox[modal]=true" class="lightbox">Open Video in Modal</a>
<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="lightbox">flash</a>
Open Google | Open Localhost Iframe
<a href="http://www.google.com/webhp?hl=en&tab=nw&lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Open Google</a> <a href="examples/iframe-html.html?lightbox[width]=350&lightbox[height]=170" class="lightbox">Open Localhost Iframe</a>
<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?lightbox[width]=700&lightbox[height]=400" class="lightbox">flash</a>
<a href="examples/ajax-license.html?lightbox[width]=450&lightbox[height]=300&lightbox[modal]=true" class="lightbox">Software license agreement</a>
<a href="http://www.youtube.com/watch?v=5f-MYl-HzNw" class="lightbox">youtube</a> <a href="http://vimeo.com/13240711" class="lightbox"><img src="assets/m13.jpg" alt=""/>vimeo</a> <a href="http://www.metacafe.com/watch/yt-nn096G5jek0/coldplay_speed_of_sound_acoustic/" class="lightbox">metacafe</a> <a href="http://www.dailymotion.com/video/x53dvz_fragma-toca-s-miracle-2008_music" class="lightbox">dailymotion</a> <a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="lightbox">google video</a>
<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a> <a href="http://www.youtube.com/watch?v=Mq0j2Ot1NHo&lightbox[width]=610&lightbox[height]=360&lightbox[modal]=true" class="lightbox">youtube</a>
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=+paris+eiffel&ie=UTF8&hq=eiffel&hnear=Paris,+Ile-de-France,+France&ll=48.855708,2.300434&spn=0.013243,0.042272&z=15&lightbox[width]=610&lightbox[height]=360" class="lightbox">Google Maps</a> <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=+paris+eiffel&ie=UTF8&hq=eiffel&hnear=Paris,+Ile-de-France,+France&ll=48.856075,2.312021&spn=0.02626,0.084543&z=14&layer=c&cbll=48.85738,2.294552&panoid=CpyaiHG57nbMr8YogDfa0Q&cbp=12,34.51,,0,-2.58&lightbox[width]=610&lightbox[height]=360" class="lightbox">Street View</a> <a href="http://www.bing.com/maps/?v=2&cp=41.89774457054518~12.471384108066559&lvl=15&sty=r&where1=Rome%2C%20Laz.%2C%20Italy&lightbox[width]=610&lightbox[height]=360" class="lightbox">Bing Maps</a>
<style type="text/css"> .jquery-lightbox-buttons .jquery-lightbox-button-openurl { background: url(assets/lightbox-new-window.png) no-repeat left top; width:30px; height:39px; float:left; display:inline; padding:0; } .jquery-lightbox-buttons .jquery-lightbox-button-openurl:hover { background: url(assets/lightbox-new-window.png) no-repeat right top; } </style>
<script type="text/javascript"> $(document).ready(function(){ $("a.customlightbox").lightbox({ buttons: [ { 'class' : 'jquery-lightbox-button-openurl', 'html' : '<span>open in new window</span>', 'callback' : function(url, object) { window.location.href = url; } } ] }); }); </script>
<a href="assets/1.jpg" class="customlightbox"><img src="assets/m1.jpg" alt=""/></a> <a href="assets/7.jpg" class="customlightbox"><img src="assets/m7.jpg" alt=""/></a> <a href="assets/9.jpg" class="customlightbox" rel="group2"><img src="assets/m9.jpg" alt=""/></a> <a href="assets/6.jpg" class="customlightbox" rel="group2"><img src="assets/m6.jpg" alt=""/></a>
<style type="text/css"> .jquery-lightbox-buttons .button-themeforest { font-size:12px; font-weight:bold; text-decoration:none; } .jquery-lightbox-buttons .button-themeforest:hover { text-decoration:underline; } </style>
<script type="text/javascript"> $(document).ready(function(){ $("a.themeforest").lightbox({ buttons: [ { 'class' : 'button-themeforest', 'html' : 'Live Preview', 'callback' : function(url, object, anchor) { title = $(anchor).attr('alt').split('|'); window.location.href = title[0]; } }, { 'class' : 'button-themeforest', 'html' : 'Buy this theme', 'callback' : function(url, object, anchor) { title = $(anchor).attr('alt').split('|'); window.location.href = title[1]; } } ] }); }); </script>
<a href="assets/17.jpg" class="themeforest" rel="group3" alt="http://themeforest.net/item/freshface-html-css/full_screen_preview/109603|http://themeforest.net/item/freshface-html-css/109603"><img src="assets/m17.jpg" alt=""/></a> <a href="assets/18.jpg" class="themeforest" rel="group3" alt="http://themeforest.net/item/perfect-box-wordpress/full_screen_preview/101974|http://themeforest.net/item/perfect-box-wordpress/101974"><img src="assets/m18.jpg" alt=""/></a>
<a href="examples/ajax-html.html?lightbox[width]=350&lightbox[height]=170" class="lightbox">Shake Effect</a>
<a href="examples/ajax-login.html?lightbox[width]=396&lightbox[height]=120&lightbox[modal]=true" class="lightbox">Login Box</a>
<input type="submit" class="button" id="lbsingle" value="Open single image"/> <input type="submit" class="button" id="lbgallery" value="Open gallery"/>
<script type="text/javascript"> $(document).ready(function(){ $("#lbsingle").click(function(ev) { $.lightbox("assets/4.jpg", { 'width' : 610, 'height' : 458, 'autoresize' : false }); ev.preventDefault(); }); $("#lbgallery").click(function(ev) { $.lightbox(["assets/4.jpg", "assets/3.jpg", "assets/6.jpg"]); ev.preventDefault(); }); }); </script>
$("#lbevents").click(function(ev) { $.lightbox("assets/2.jpg", {'modal': true}, function() { $("#console").append("<p>'callback' function fired.</p>"); }); ev.preventDefault(); });
console:
Events fired:
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.
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.
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.4/jquery.min.js"></script>
jquery.js and jquery.min.js are the same script. Delete the last one if you can. Keep only one.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.
Simply add the following code:
<script type="text/javascript"> $(document).ready(function(){ $.lightbox("image.jpg"); }); </script>
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>
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">
In your Flash movie you need to use getURL to call your custom callback function, like so:
getURL("javascript:$.lightbox('image.jpg')");
First thing you need to do is install the script in your parent window, but don't initialize it. Don't use $(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; }; $('.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.
To be able to help solve a problem quickly, please read the entries below. I'll do my best to assist you. I provide a full range of Support except:
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