Log in Register

Login to your account

Username
Password *
Remember Me

Create an account

Fields marked with an asterisk (*) are required.
Name
Username
Password *
Verify password *
Email *
Verify email *

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

Different title positions - float, inside and over

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


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

Media Player

The Widgetkit Media Player is a HTML5 audio and video player completely built HTML and CSS. You can easily embed video files into your website by using the HTML5 video element. A Flash player fallback is included for all unsupported browsers.


Examples


This is a MP3 Audio Sample:


Features

  • Native playback for modern HTML5 browsers
  • Supports MP4 (h.264), WebM, FLV, WMV and MP3 files
  • Completely built with HTML and CSS
  • Responsive design to fit all device resolutions
  • Same UI in all browsers
  • Create your own skins
  • Flash player fallback for unsupported browsers
  • Works with Joomla and WordPress

How To Use

Use the HTML5 video element to embed video in your website. For example:

<video src="/video.mp4" width="320" height="240"></video>

You can also provide multiple sources, to add support for the different video formats like h.264, WebM or Ogg:

<video width="320" height="240">
	<source type="video/mp4"  src="/video.mp4" />
	<source type="video/webm" src="/video.webm" />
	<source type="video/ogg"  src="/video.ogv" />
</video>

Use the HTML5 audio element to embed MP3 files in your website. For example:

<audio src="/audio.mp3" type="audio/mp3"></audio>

More Articles...

  1. Yacht Club Capri Magazine

Capri Time

02:35 PM
01:35 PM
LONDON
LONDON 01:35 PM

MyCapri

MyCapri l'App dell'Isola di Capri ti consiglia hotel, ristoranti, shopping, noleggio ...