E

Lightbox

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.

Examples

Different animations - fade, elastic and none

Lightbox Image Lightbox Image Lightbox Image

Different title positions - float, inside and over

Lightbox Image Lightbox Image Lightbox Image

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

" title="Vimeo Video">Vimeo
  • MP4 (h.264)
  • Swf
  • Inline
  • Iframe

    • Features

    • 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 all device resolutions
    • 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

    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:300;" href="#wk-10">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