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.
Features at a glance
Examples
Different animations - fade
, elastic
and none
<a data-lightbox="transitionIn:fade; transitionOut:fade;" href="/images/sampledata/lightbox/lightbox_01_big.jpg"><img src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" /></a>
Different title positions - float
, inside
and over
<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float;" href="/images/sampledata/lightbox/lightbox_01_big.jpg" title="Donec augue felis, aliquet sit amet tempor vel, sollicitudin nec sem."><img class="pic3d" src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" width="190" height="119" /></a>
You can use it in a gallery
<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float; group:gallery1" href="/images/sampledata/lightbox/lightbox_01_big.jpg" title="Donec augue felis, aliquet sit amet tempor vel, sollicitudin nec sem."><img class="pic3d" src="/images/sampledata/lightbox/lightbox_01.jpg" border="0" alt="fade" width="190" height="119" /></a>
Various examples in one gallery (try also using the keyboard and mouse scroll wheel)
Load Widgets In A Lightbox
Use #wk-ID
to load widgets like slideshows or galleries in a lightbox. For example: Widgetkit Slideshow
<a data-lightbox="width:600;height:375;" href="#wk-1">Lightbox</a>
How To Use
Use the HTML5 custom data attribute data-lightbox
to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:
<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>
Here is a list of the most common parameters:
-
titlePosition - How should the title show up? (
float
,outside
,inside
orover
) -
transitionIn - Set a opening transition. (
fade
,elastic
, ornone
) -
transitionOut - Set a closing transition (
fade
,elastic
, ornone
) -
overlayShow - Set to
true
orfalse
-
scrolling - Set to
yes
orno
- width - Set a width in pixel
- height - Set a height in pixel
- padding - Set a padding in pixel