Alternativer Lightbox 2 Bildtitel: Wahlweise ohne MouseOver-Effekt

Wenn ihr das hübsche Bildpopup Lightbox 2 kennt, werdet ihr vielleicht einmal vor dem Problem stehen, dass ihr der Lightbox einen etwas längeren Bildtitel mitgeben möchtet. Bildtitel werden der Lightbox über das Titel-Attribut im Link um das Bild zugewiesen, daher wird bei einem mouseOver über dem Bild dieser (in dem Fall sehr lange) Titel angezeigt.

Heute zeigen wir euch, wie ihr die Lightbox so modifizieren könnt, dass ihr Beispielsweise einen Bildtitel im Lightbox Popup zu sehen bekommen, jedoch keinen beim mouseOver über dem Bild.

Die Modifizierung der Lightbox bezieht sich auf Version 2.04. Diese könnt ihr hier herunterladen.

Lightbox v2.04

Nach dieser Modifikation werdet ihr den Link-Titel sowie den Lightbox Titel separat ansprechen können.

So sieht der Code-Bereich (lightbox.js, Zeilen 216 bis 227) der geändert werden muss vorher aus:

...
	if ((imageLink.rel == 'lightbox')){
		// if image is NOT part of a set, add single image to imageArray
		this.imageArray.push([imageLink.href, imageLink.title]);         
	} else {
		// if image is part of a set..
		this.imageArray = 
			$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
			collect(function(anchor){ return [anchor.href, anchor.title]; }).
			uniq();
		while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
	}
...

Und so sieht die lightbox.js nach der Modifikation aus:

...
	if ((imageLink.rel == 'lightbox')){
		// if image is NOT part of a set, add single image to imageArray
		this.imageArray.push([imageLink.href, imageLink.id]);         
	} else {
		// if image is part of a set..
		this.imageArray = 
			$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
			collect(function(anchor){ return [anchor.href, anchor.id]; }).
			uniq();
		while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
	}
...

Ihr werdet vielleicht keine direkte Änderung vernehmen können. Daher hier die zwei kleinen Änderungen:

Unsere Zeile 4 (lightbox.js Zeile 218):
imageLink.title ersetzen durch imageLink.id

Unsere Zeile 9 (lightbox.js Zeile 223):
anchor.title ersetzen durch anchor.id

Und schwups, die Modifikation ist vollbracht.

Nun könnt ihr die Lightbox wie folgt ansprechen:

<a href="bild.jpg" rel="lightbox[1]" id="Langer Lightbox Bildtitel" title="kurzer mouseOver Titel">
	<img src="bild.jpg" width="100" height="100" />
</a>

Für faule Leute hier die „lightbox.js“ als ZIP-Datei.

Ich hoffe, diese kleine Mod hat euch weitergeholfen.

Viel Spaß mit der modifizierten Lightbox.