jQuery Plugins: Lightbox module tossnLightbox

Full responsive jQuery lightbox plugin. Download and use it free.

Examples top

Single image 1



Single image 2

	centerOnScroll: false,
	overlayColor: '#ffffff',
	enableEscapeKey: false,
	closeButtonColor: '#ff00ff',
	closeOnBgClick: false


Single image 3

		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

	effect: 'drop'


iFrame 1

Test it

	padding: 0,
	scrollbars: 'no',
	type: 'iframe'


iFrame 2

Test it

	padding: 0,
	width: '440px',
	height: '80%',
	type: 'iframe'


Inline HTML

Test it

	type: 'inline'

Inline HTML

Sed diam nonumy eirmod tempor, tempor invidunt ut labore et dolore magna erat.
Tempor invidunt ut et dolore magna aliquyam


Image Gallery

	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() {

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.



Download our latest release tossnLightbox v1.0.3