Widgetkit

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

• Display images, videos, HTML, Iframes, Ajax requests and SWF
• Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
• Group lightboxes and mix different content types
• Responsive design to fit images great on mobile devices
• Load other widgets in lightbox
• 3 different opening and closing transitions
• 4 different caption styles
• Keyboard and mouse scroll wheel navigation
• Build on the latest jQuery version
• Works with Joomla and WordPress

Examples

Different animations - fade, elastic and none

<a data-lightbox="transitionIn:fade; transitionOut:fade;" href="/images/demo/sample_big.jpg"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

Different title positions- float and over

<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float;" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

You can use it in a gallery

<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float; group:gallery1" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

Various examples in one gallery (try also using the keyboard and mouse scroll wheel)

• YouTube
• Vimeo
• MP4 (h.264)
• Swf
• Inline
• Iframe

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:945;height:637;" href="#wk-2">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 or over)
• transitionIn - Set a opening transition. (fade, elastic, or none)
• transitionOut - Set a closing transition (fade, elastic, or none)
• overlayShow - Set to true or false
• scrolling - Set to yes or no
• width - Set a width in pixel
• height - Set a height in pixel
• padding - Set a padding in pixel

Reveal Lightbox

Use the [modal_box] shortcode to show a popup box with overlay. The [modal_box] shortcode can also be linked with these module positions: reveal-a, reveal-b and reveal-c. By using one of these positions as your target, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.

For each module linked to reveal-a, reveal-b or reveal-c, you can use Module Class Suffix to style it just like a normal module. The target parameter can also be the id of a content section.

Size modifier

To adjust the size (width) of the modal box, add modal-small or modal-large to the Module Class Suffix of the module.

Trigger a modal box from link

[modal_box link target="reveal-a"]reveal-a[/modal_box] 
[modal_box link target="reveal-b"]reveal-b[/modal_box] 
[modal_box link target="reveal-c"]reveal-c[/modal_box]

Toggle modal box from buttons

[modal_box button style="color" target="reveal-a"]reveal-a[/modal_box]
[modal_box button style="color" target="reveal-b"]reveal-b[/modal_box]
[modal_box button style="color" target="reveal-c"]reveal-c[/modal_box]

Toggle modal box for inline content

The [modal_box] shortcode can also be used for inline content by using the following sytnax:

<!-- create a link that will trigger the pop-up modal box -->
[modal_box link target="mycontent"]my link[/modal_box] 

<!-- create the content of the modal box -->
[modal_box content target="mycontent" style="mod-color"]
...
[/modal_box]