• 0 DSC07086
  • DSC07016
  • DSC07017
  • DSC07028
  • DSC07041
  • DSC07051
  • DSC07054
  • DSC07065
  • DSC07091
  • DSC07130
  • DSC07139
  • DSC07139 IMG 2186
  • DSC07139 IMG 2491
  • DSC07151
  • DSC07166
  • DSC07314
  • DSC07359
  • DSC07379
  • DSC07416
  • DSC07423
  • DSC07480
  • DSC07484
  • DSC07492
  • DSC07504
  • DSC07508
  • DSC07541
  • DSC07547
  • DSC07593
  • DSC07600
  • DSC07624
  • DSC07694
  • DSC07739
  • DSC07778
  • DSC07789
  • DSC07850
  • DSC07878
  • DSC07912
  • DSC07925
  • DSC07929
  • DSC07945
  • DSC07955
  • DSC07972
  • DSC07989
  • DSC08021
  • DSC08039
  • DSC08047
  • DSC08126
  • DSC08144
  • DSC08168
  • DSC08171
  • DSC08227
  • DSC08231
  • DSC08245
  • DSC08276
  • DSC08395
  • DSC08404
  • DSC 0047
  • DSC 0108
  • DSC 8070
  • DSC 8071
  • DSC 8144
  • DSC 8175
  • DSC 8184
  • DSC 8253
  • DSC 8254
  • DSC 8271
  • DSC 8284
  • DSC 8328
  • DSC 8376
  • DSC 8409
  • DSC 8463
  • DSC 8469
  • DSC 8485
  • DSC 8556
  • DSC 8603
  • DSC 8657
  • DSC 8668
  • DSC 8769
  • DSC 8799
  • DSC 8810
  • DSC 8811
  • DSC 8835
  • DSC 8859
  • DSC 8890
  • DSC 8912
  • DSC 8969
  • DSC 8987
  • DSC 9032
  • DSC 9038
  • DSC 9041
  • DSC 9042
  • DSC 9044
  • DSC 9059
  • DSC 9181 IMG 1913
  • DSC 9181 IMG 1960
  • DSC 9228
  • DSC 9247
  • DSC 9264
  • DSC 9289
  • DSC 9300
  • DSC 9359
  • DSC 9368
  • DSC 9369
  • DSC 9380
  • DSC 9392
  • DSC 9665
  • DSC 9670
  • DSC 9694
  • DSC 9711
  • DSC 9725
  • DSC 9730
  • DSC 9732
  • DSC 9733
  • DSC 9750
  • DSC 9762
  • DSC 9789
  • DSC 9793
  • DSC 9797
  • DSC 9801
  • DSC 9807
  • DSC 9820
  • DSC 9840
  • DSC 9856
  • DSC 9877
  • DSC 9936
  • DSC 9937
  • IMG 0332
  • IMG 0362
  • IMG 0380
  • IMG 0455
  • IMG 0601
  • IMG 0651
  • IMG 0660
  • IMG 0673
  • IMG 0713
  • IMG 0747
  • IMG 0775
  • IMG 0868
  • IMG 1137
  • IMG 1139
  • IMG 1141
  • IMG 1142
  • IMG 1183
  • IMG 1203
  • IMG 1335
  • IMG 1410
  • IMG 1460
  • IMG 1472
  • IMG 1499
  • IMG 1556
  • IMG 1579
  • IMG 1586
  • IMG 1635
  • IMG 1688
  • IMG 1696
  • IMG 1737
  • IMG 1851
  • IMG 1902
  • IMG 1903
  • IMG 1905
  • IMG 1911
  • IMG 1913
  • IMG 1929
  • IMG 1960
  • IMG 1977
  • IMG 1999
  • IMG 2012
  • IMG 2059
  • IMG 2065
  • IMG 2069
  • IMG 2122
  • IMG 2146
  • IMG 2172
  • IMG 2186
  • IMG 2308
  • IMG 2439
  • IMG 2491
  • IMG 2506
  • Y DSC 9711

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.

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

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)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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