Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that's still small in size, has the features you need, and doesn't get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don't have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don't have to check out dozens of plugins, learn how to use them, only to find out they don't work in a specific browser. And even if jKit doesn't have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don't find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it's already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here's a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Lightbox command

Open images, or html documents in a lightbox or modal window.

Basic Usage (HTML)

data-jkit="[lightbox:group=myalbum]"

Advanced Init (JavaScript)

$('#myelement').jKit('lightbox', { 'group': 'myalbum' });

Options

OptionValuesDefaultDescription
speedInt or "fast", "slow" (Milliseconds)500The duration of the animation in milliseconds, bigger = slower.
opacityFloat0.7The final opacity of the overlay layer
clearanceInt (Pixels)200The minimum clearance around the image in pixels
closerHTMLxThe HTML for the closing button
nextHTML>The HTML for the next button
prevHTML<The HTML for the prev button
modal"yes" or "no"noDo you want to use the lightbox as a modal overlay?
widthInt (Pixels)The width of the image in case you don't want to autoscale the image
heightInt (Pixels)The height of the image in case you don't want to autoscale the image
titleHeightInt (Pixels)20The height of the title bar
groupStringIf this image is part of a group or gallery, add the group identifier

Events

EventDescription
clickedTriggered whenever the lightbox is being opened

Examples

Various Examples:

All the different uses of a lightbox in one example:

Source:
<a href="../img/sky.jpg" data-jkit="[lightbox:group=images]" title="Paragliders in the sky">Open image</a> &nbsp; &nbsp; 
<a href="../img/oversized.jpg" data-jkit="[lightbox:group=images]" title="Beautiful!">Oversized image</a> &nbsp; &nbsp; 
<a href="../img/square.jpg" data-jkit="[lightbox:group=images]" title="Watermelons, square!">Open square image</a> &nbsp; &nbsp; 
<a href="http://reddit.com" data-jkit="[lightbox]" title="Reddit: The social news platform">Open website (iFrame)</a> &nbsp; &nbsp; 
<a href="../stuff/modal.html" data-jkit="[lightbox:modal=yes;width=500px;height=300px]">Modal dialog (iFrame)</a>

Direct from image:

You can use the lightbox without links, just with images, if needed:

Source:
<img src="../img/sky.jpg" data-jkit="[lightbox]" title="Paragliders in the sky" width="50" height="50" style="cursor:pointer;cursor:hand">

Example CSS

div#jkit-lightbox-bg {
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: #000;
}

div#jkit-lightbox-content {
	display: none;
    position: fixed;
    border: none;
    left: 10%;
    top: 100px;
    z-index: 10001;
    background: #fff;
    padding: 10px;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
}

div#jkit-lightbox-title {
	display: none;
	position: fixed;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	height: 20px;
	left: 0px;
	top: 0px;
	z-index: 10002;
	text-align: left;
}

div#jkit-lightbox-nav {
	display: none;
	position: fixed;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	height: 20px;
	left: 0px;
	top: 0px;
	z-index: 10003;
	text-align: right;
	width: 50px;
	cursor: pointer;
	cursor: hand;
}

span#jkit-lightbox-nav-next {
	margin-right: 20px;
}

span#jkit-lightbox-nav-prev {
	margin-right: 10px;
}

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

 

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]