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
| Option | Values | Default | Description |
|---|---|---|---|
| speed | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of the animation in milliseconds, bigger = slower. |
| opacity | Float | 0.7 | The final opacity of the overlay layer |
| clearance | Int (Pixels) | 200 | The minimum clearance around the image in pixels |
| closer | HTML | x | The HTML for the closing button |
| next | HTML | > | The HTML for the next button |
| prev | HTML | < | The HTML for the prev button |
| modal | “yes” or “no” | no | Do you want to use the lightbox as a modal overlay? |
| width | Int (Pixels) | The width of the image in case you don’t want to autoscale the image | |
| height | Int (Pixels) | The height of the image in case you don’t want to autoscale the image | |
| titleHeight | Int (Pixels) | 20 | The height of the title bar |
| group | String | If this image is part of a group or gallery, add the group identifier |
Events
| Event | Description |
|---|---|
| clicked | Triggered 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> <a href="../img/oversized.jpg" data-jkit="[lightbox:group=images]" title="Beautiful!">Oversized image</a> <a href="../img/square.jpg" data-jkit="[lightbox:group=images]" title="Watermelons, square!">Open square image</a> <a href="http://reddit.com" data-jkit="[lightbox]" title="Reddit: The social news platform">Open website (iFrame)</a> <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 ]