jQuery Plugins: Lightbox Modul tossnLightbox

October 15, 2019

Beispiele Seitenanfang

Einzelnes Bild 1

$('.lightbox1').tossnLightbox();

 

Einzelnes Bild 2

$('.lightbox2').tossnLightbox({
	centerOnScroll: false,
	overlayColor: '#ffffff',
	enableEscapeKey: false,
	closeButtonColor: '#ff00ff',
	closeOnBgClick: false
});

 

Einzelnes Bild 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>';
		}
});

 

Einzelnes Bild 4

$('.lightbox1').tossnLightbox({
	effect: 'drop'
});

 

iFrame 1

ausprobieren

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

 

iFrame 2

ausprobieren

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

 

Inline HTML

ausprobieren

$('.lightbox7').tossnLightbox({
	type: 'inline'
});

 

Bilder Galerie

$('.imageGallery').tossnLightbox({
	type: 'gallery',
	titleShow: true,
	closeOnBgClick: false
});

 

How to use Seitenanfang

1. jQuery laden

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. tossnLightbox laden

<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. Ein Link- oder Buttonelement erstellen

<a href="images/image1.jpg" class="lightbox">my link</a>

4. Das Plugin mithilfe eines jQuery Selektors ausführen

$(document).ready(function() {
	$('.lightbox').tossnLightbox();
});

Globale Optionen Seitenanfang

Erweiterte Optionen für type="iframe" Seitenanfang

Erweiterte Optionen für type="gallery" Seitenanfang

Callback Funktionen Seitenanfang

Public Methoden Seitenanfang