<div class="content clearfix">
<p>The Widgetkit Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.</p>
<br />
<h2>Examples</h2>
<p>Different animations - <code>fade</code>, <code>elastic</code> and <code>none</code></p>
<p class="gallery"><a data-lightbox="transitionIn:fade;transitionOut:fade;" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image1_lightbox.jpg"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image1.jpg" alt="Lightbox Image" width="180" height="120" /></a> <a data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image2_lightbox.jpg"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image2.jpg" alt="Lightbox Image" width="180" height="120" /></a> <a data-lightbox="transitionIn:none;transitionOut:none;" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image3_lightbox.jpg"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image3.jpg" alt="Lightbox Image" width="180" height="120" /></a></p>
<p>Different title positions - <code>float</code>, <code>inside</code> and <code>over</code></p>
<p class="gallery"><a data-lightbox="group:mygroup1;titlePosition:float" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image4_lightbox.jpg" title="Title Position: Float"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image4.jpg" alt="Lightbox Image" width="180" height="120" /></a> <a data-lightbox="group:mygroup1;titlePosition:inside" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image5_lightbox.jpg" title="Title Position: Inside"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image5.jpg" alt="Lightbox Image" width="180" height="120" /></a> <a data-lightbox="group:mygroup1;titlePosition:over;padding:0" href="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image6_lightbox.jpg" title="Title Position: Over and Padding set to 0"><img src="http://www.yootheme.com/images/yootheme/widgetkit/lightbox/image6.jpg" alt="Lightbox Image" width="180" height="120" /></a></p>
<p>Various examples in one gallery (try also using the keyboard and mouse scroll wheel)</p>
<ul>
<li><a data-lightbox="group:mygroup2" href="http://www.youtube.com/watch?v=R55e-uHQna0" title="YouTube Video">YouTube</a></li>
<li><a data-lightbox="group:mygroup2" href="http://vimeo.com/15261921" title="Vimeo Video">Vimeo</a></li>
<li><a data-lightbox="group:mygroup2;autoplay:true;" href="http://www.yootheme.com/videos/mediaplayer.mp4" title="MP4 (h.264)">MP4 (h.264)</a></li>
<li><a data-lightbox="group:mygroup2" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" title="Flash Swf">Swf</a></li>
<li><a data-lightbox="group:mygroup2" href="http://www.yootheme.com/widgetkit/examples/lightbox#inline" title="Inline Content from the Website">Inline</a></li>
<li><a data-lightbox="group:mygroup2;width:1000;height:600" href="http://www.wikipedia.org" title="Iframe">Iframe</a></li>
</ul>
<br />
<h2>Features</h2>
<ul class="check">
<li>Display images, videos, HTML, Iframes, Ajax requests and SWF</li>
<li>Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies</li>
<li>Group lightboxes and mix different content types</li>
<li>Responsive design to fit all device resolutions</li>
<li>Load other widgets in lightbox</li>
<li>3 different opening and closing transitions</li>
<li>4 different caption styles</li>
<li>Keyboard and mouse scroll wheel navigation</li>
<li>Build on the latest jQuery version</li>
<li>Works with Joomla and WordPress</li>
</ul>
<br />
<h2>Load Widgets In A Lightbox</h2>
<p>Use <code>#wk-ID</code> to load widgets like slideshows or galleries in a lightbox. For example: <a data-lightbox="width:600;height:300;" href="http://www.yootheme.com/widgetkit/examples/lightbox#wk-50" title="Widgetkit Slideshow">Widgetkit Slideshow</a></p>
<pre>&lt;a data-lightbox="width:600;height:300;" href="#wk-10"&gt;Lightbox&lt;/a&gt;</pre>
<br />
<h2>How To Use</h2>
<p>Use the HTML5 custom data attribute <code>data-lightbox</code> to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:</p>
<pre><code>&lt;a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org"&gt;Lightbox&lt;/a&gt;</code></pre>
<p>Here is a list of the most common parameters:</p>
<ul>
<li><strong>titlePosition</strong> - How should the title show up? (<code>float</code>, <code>outside</code>, <code>inside</code> or <code>over</code>)</li>
<li><strong>transitionIn</strong> - Set a opening transition. (<code>fade</code>, <code>elastic</code>, or <code>none</code>)</li>
<li><strong>transitionOut</strong> - Set a closing transition (<code>fade</code>, <code>elastic</code>, or <code>none</code>)</li>
<li><strong>overlayShow</strong> - Set to <code>true</code> or <code>false</code></li>
<li><strong>scrolling</strong> - Set to <code>yes</code> or <code>no</code></li>
<li><strong>width</strong> - Set a width in pixel</li>
<li><strong>height</strong> - Set a height in pixel</li>
<li><strong>padding</strong> - Set a padding in pixel</li>
</ul>
</div>