jQuery Plugins: Lightbox Modul tossnLightbox

Full responsive jQuery lightbox Plugin. Herunterladen und frei nutzen.

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

Inline HTML

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

 

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

Key Typ Standard Beschreibung
type string "image" Typ der Lightbox. Gültige Werte: "image", "gallery", "iframe" oder "inline".
effect string "fade" Effekt der Lightbox. Gültige Werte: "fade", "drop", "slide" oder "show".
padding integer 0 Abstand zum Inhalt z. B. 10.
centerOnScroll boolean true Lightbox zentrieren, wenn das Fenster gescrollt wird.
overlayColor string "#222222" Farbe des Overlay.
overlayOpacity float 0.75 Deckkraft des Overlay.
constructSpeed integer 400 Zeit, in der die Lightbox aufgebaut wird, in Millisekunden.
destructSpeed integer 400 Zeit, in der die Lightbox geschlossen wird, in Millisekunden.
contentBackgroundColor string "#ffffff" Hintergrundfarbe des Inhaltbereichs.
closeOnBgClick boolean true Lightbox beim klicken auf den Hintergrund schließen.
showCloseButton boolean true Schließenbutton anzeigen oder nicht.
closeButtonColor string "#ffffff" Farbe des Schließenbuttons.
minDeviceWidth integer 0 Wenn die Fensterbreite kleiner ist, als der gegebene Wert, aber größer als Null, wird die Lightbox nicht geöffnet, sondern das Standardverhalten des Links wird ausgeführt.
enableEscapeKey boolean true Esc-Taste zum schließen der Lightbox aktivieren.
titleShow boolean false Nur für type="image" und type="gallery". Den Inhalt des title-Attributs anzeigen.
titlePosition string "inside" Den Titel innerhalb oder außerhalb der Lightbox anzeigen. Gültige Werte: "inside" oder "outside".

Erweiterte Optionen für type="iframe" Seitenanfang

Key Typ Standard Beschreibung
width string "80%" Breite der Lightbox z. B. "500px" oder "70%".
height string "80%" Höhe der Lightbox z. B. "500px" oder "70%".
scrollbars string "no" "auto", "yes", oder "no".

Erweiterte Optionen für type="gallery" Seitenanfang

Key Typ Standard Beschreibung
slideSpeed integer 400 Animationszeit, in der die Bilder gewechselt werden, in Millisekunden.
showNavButtons boolean true Button zur Navigation anzeigen oder nicht.
autoSlide boolean false Bilder automatisch wechseln.
slideIntervalSpeed integer 5000 Zeit, die ein einzelnes Bild angezeigt wird, in Millisekunden.

Callback Funktionen Seitenanfang

Key Standard Beschreibung
onStart null Wird vor dem Laden der Lightbox aufgerufen.
onComplete null Wird nach dem Laden der Lightbox aufgerufen.
onClosed null Wird aufgerufen kurz bevor die Lightbox geschlossen wird.
titleFormatCallback null Callback Funktion um das Aussehen des Titels mittels HTML zu gestalten.

Public Methoden Seitenanfang

Methode Beschreibung
$.tossnLightbox.close() Schließt die aktuelle Lightbox.
$.tossnLightbox.prev() Zeigt das vorherige Bild einer Lightbox Galerie an.
$.tossnLightbox.next() Zeigt das nächste Bild einer Lightbox Galerie an.

Inhalt

Herunterladen

Die aktuelle Version herunterladen tossnLightbox v1.0.3

Herunterladen!