jQuery Plugins: Lightbox module tossnLightbox

October 15, 2019

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

Test it

$('.lightbox5').tossnLightbox({
	padding: 0,
	scrollbars: 'no',
	type: 'iframe'
});

 

iFrame 2

Test it

$('.lightbox6').tossnLightbox({
	padding: 0,
	width: '440px',
	height: '80%',
	type: 'iframe'
});

 

Inline HTML

Test it

$('.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

Advanced options for type="iframe" top

Advanced options for type="gallery" top

Callback functions top

Public methods top