Lightbox

Standard Joomla Lightbox

The standard Joomla lightbox can easily be called up by entering the "rel" parameter after a link.

Example: <a href="http://www.themicrotechs.com" rel="lightbox">My Link</a>

WidgetKit Lightbox

YooTheme's Widgetkit Component contains more sophisticated options powered by the current jQuery version,  allowing you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.

Features

• Display images, HTML, Iframes, Ajax requests, YouTube, Vimeo and SWF movies
• Group lightboxes and mix different content types
• 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 1.5, 1.6, WordPress and Stand-alone

Examples

Different animations - fade, elastic and none

Different title positions - float, inside and over

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

• YouTube
• Vimeo
• Swf
• Inline
• Iframe

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:700;" href="http://www.google.com">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
• width - Set a width in pixel
• height - Set a height in pixel
• padding - Set a padding in pixel