A simple pure Javascript plugin.
A simple pure Javascript plugin. image viewer, gallery viewer, deeplink lightbox viewer, HTML content viewer, iframe viewer, video popup viewer... Main Features:
STEP 1 : This plugin uses just one small CSS. Add to your document header.
<link rel="stylesheet" href="src/css/slim-lightbox.min.css">
STEP 2 : Then, just include plugin javascript file to your document. Add to your document.
<script src="src/js/slim-lightbox.min.js"></script>
<!--Example 1 -->
<!--Single image view with a element (with thumbnail) -->
<a class="s-lightbox" href="your-image.jpg">
<img src="your-image-thumb.jpg" width="210" height="135">
</a>
<!--Single image view with a element -->
<!--Single image view with just link -->
<a class="s-lightbox" href="your-image.jpg">Nice Photo</a>
<!--Single image view with a element -->
<!--Example 2 -->
<!--Single image view with span element (you can use any element)-->
<span class="s-lightbox" data-s-lightbox-original="your-image.jpg" data-s-lightbox-caption="Nice Food">
<img src="your-image-thumb.jpg" width="210" height="135">
</span>
<!--Single image view with span element -->
<!--Example 3 -->
<!--Image gallery viewe examples-->
<a class="s-lightbox" href="your-image1.jpg" data-s-lightbox-group="gallery1" data-s-lightbox-caption="<b>Sweet cat</b>">
<img src="your-image1-thumb.jpg" width="210" height="135">
</a>
<a class="s-lightbox" href='your-image2.jpg' data-s-lightbox-group="gallery1" data-s-lightbox-caption="<b>Dog</b>">
<img src="your-image2-thumb.jpg" width="210" height="135">
</a>
<a class="s-lightbox" href='your-image3.jpg' data-s-lightbox-group="gallery1" data-s-lightbox-caption="<b>Orangutan</b>">
<img src="your-image3-thumb.jpg" width="210" height="135">
</a>
<!--For more example visit the examples page.. -->
<!--INITIALIZING THE PLUGIN-- its very easy. with default parameter values-->
<script type="text/javascript">
var viewer = new slimLightbox();
</script>
plugin options:
| Name | Type | Default | Description |
|---|---|---|---|
| duration | integer | 500 | slider changing speed duration. |
| keyboardNav | boolean | true | if true, you can use the left and right arrow keys for slider change. |
| scrollNav | boolean | true | If true, you can use mouse scroll events for next and previous slider change. |
| escClose | boolean | true | If true, you can use the ESC for close the lightbox |
| overlayClose | boolean | true | if true, you can close the lightbox when clicked the overlay. |
| drag | boolean | true | if true, you can use drag and drop for the slider change. |
| deepLink | boolean | true | If true, you can add deeplink url to the element. |
| imgBorder | boolean | false | if true, you can add to all views border. then you can change border style vith this .s-lightbox-viewer-border .s-lightbox-item-box{...} |
| fullScreenBtn | boolean | false | if true, you can see the fullscreen button on lightbox. |
| pagerShow | boolean | true | If true, you can see on the plugin bottom galley image counts |
| loader | string | "type2" | image loader type. other value "type1" |
| overlayStyle | string | "background-color:rgba(30,30,30,.9)" | popup overlay style. you can change color and opacity with css. |
plugin HTML data attribute parameters
| Name | Description |
|---|---|
| class="s-lightbox" | First you have to add this class to your element. |
| data-s-lightbox-original="example-big-image.jpg" | if you don't have exist you can use "href" attribute for that |
| data-s-lightbox-caption="Image caption" | You can add the image caption if you want like that. |
| data-s-lightbox-group="gallery1" | If you want to add pictures to a gallery, you must give the same group name. |
| data-s-lightbox-deeplink="your-image-url-here" | If you want to deeplinking you can add easly like that. |
| data-s-lightbox-type="html" | if you using image view not need this. other values : "youtube", "vimeo", "dailymotion", "iframe" and "googlemap". for examples check the examples page. |
| data-s-lightbox-width="800" | Popup view maximum width size. (except image view) default : 800 |
| data-s-lightbox-height="450" | Popup view maximum height size. (except image view) default : 450 |
| data-s-lightbox-ratio="false" | if true, maintains width / height ratio (except image view). default : false |
You can change styles with css. Find the element you want to change and make the changes you want with css.
Some examples:
/*you can change caption box style like this:*/
.s-lightbox-caption{
background-color:#F00;
color: #FF0;
...
}
/*you can change page info style like this:*/
.s-lightbox-page-info{
padding:20px;
background-color:#0FF;
...
}