Full responsive jQuery lightbox plugin. Download and use it free.
jQuery Plugins: Lightbox module tossnLightbox
Thorsten Gading
Thorsten Gading
2019-10-15T07:08:07+00:00
1000
700
https://tossn.de/jquery-plugins-en.html
Examples top
Single image 1
$('.lightbox1').tossnLightbox();
Single image 2
$('.lightbox2').tossnLightbox({
centerOnScroll: false,
overlayColor: '#ffffff',
enableEscapeKey: false,
closeButtonColor: '#ff00ff',
closeOnBgClick: false
});
Single image 3
$('.lightbox3').tossnLightbox({
titleShow: true,
titlePosition: 'outside',
titleFormatCallback: function(title) {
return '<span style="padding:4px 12px;border:1px solid #fff;background-color:red;">' + title + '</span>';
}
});
Single image 4
$('.lightbox1').tossnLightbox({
effect: 'drop'
});
iFrame 1
$('.lightbox5').tossnLightbox({
padding: 0,
scrollbars: 'no',
type: 'iframe'
});
iFrame 2
$('.lightbox6').tossnLightbox({
padding: 0,
width: '440px',
height: '80%',
type: 'iframe'
});
Inline HTML
$('.lightbox7').tossnLightbox({
type: 'inline'
});
Image Gallery
$('.imageGallery').tossnLightbox({
type: 'gallery',
titleShow: true,
closeOnBgClick: false
});
How to use top
1. load jQuery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. load tossnLightbox
<script type="text/javascript" src="tossnLightbox/js/tossn-lightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="tossnLightbox/css/tossn-lightbox.min.css" media="all" />
3. Create a link or button element
<a href="images/image1.jpg" class="lightbox">my link</a>
4. Fire plugin using jQuery selector
$(document).ready(function() {
$('.lightbox').tossnLightbox();
});
Global options top
Key | Type | Default | Description |
---|---|---|---|
type | string | "image" | Lightbox type. Can be set to "image", "gallery", "iframe" or "inline". |
effect | string | "fade" | Can be set to "fade", "drop", "slide" or "show". |
padding | integer | 0 | Padding of the content e. g. 10. |
centerOnScroll | boolean | true | Center lightbox on scrolling window. |
overlayColor | string | "#222222" | Color of the overlay. |
overlayOpacity | float | 0.75 | Opacity of the overlay. |
constructSpeed | integer | 400 | Construction time in milliseconds. |
destructSpeed | integer | 400 | Destruction time in milliseconds. |
contentBackgroundColor | string | "#ffffff" | Background color of the content area. |
closeOnBgClick | boolean | true | Close lightbox if backgroud was clicked. |
showCloseButton | boolean | true | Close button will be displayed or not. |
closeButtonColor | string | "#ffffff" | Close button font color. |
minDeviceWidth | integer | 0 | If window width is less then value and value greater than 0, lightbox will not be opened and default behavior of element will be triggered. |
enableEscapeKey | boolean | true | Close lightbox by clicking escape key. |
titleShow | boolean | false | Type="image" and type="gallery" only. Display content of title tag. |
titlePosition | string | "inside" | Display title "inside" or "outside" the lightbox, if "titleShow" is set to true. |
Advanced options for type="iframe" top
Key | Type | Default | Description |
---|---|---|---|
width | string | "80%" | Width for contentType="iframe". E. g. "500px" or "70%". |
height | string | "80%" | Height for contentType="iframe". E. g. "500px" or "70%". |
scrollbars | string | "no" | "auto", "yes", or "no". |
Advanced options for type="gallery" top
Key | Type | Default | Description |
---|---|---|---|
slideSpeed | integer | 400 | Time, the gallery images will be changed, in milliseconds. |
showNavButtons | boolean | true | Show navigation buttons in gallery. |
autoSlide | boolean | false | If true, gallery will automatically transition. |
slideIntervalSpeed | integer | 5000 | How long will a gallery image be displayed, in milliseconds. |
Callback functions top
Key | Default | Description |
---|---|---|
onStart | null | Will be called before loading. |
onComplete | null | Will be called after loading. |
onClosed | null | Will be called before lightbox is closed. |
titleFormatCallback | null | Callback function to customize title look, if "titleShow" is set to true. Wrap title with any HTML. |
Public methods top
Method | Description |
---|---|
$.tossnLightbox.close() | Will close the current lightbox. |
$.tossnLightbox.prev() | Will step to the next image of the current lightbox gallery. |
$.tossnLightbox.next() | Will step to the previous image of the current lightbox gallery. |