Lightbox2 mit CSS Selektoren via Prototype aktivieren
Posted on Sep 14, 2006 in Development | 0 comments
Quick n Dirty.. ;)
Diese Funktion fügt allen Bilderlinks innerhalb des angegebenen CSS-Selectors das berühmte ' rel="lightbox" ' hinzu. Es macht praktisch das was mein WordPress Plugin auch tut, nur eben als Javascript und mit Hilfe der Prototype $$ Funktion. Also wenn zum Beispiel eure Beiträge im DIV mit der ID "posts" liegen müsste der Aufruf wie folgt aussehen
enlightMe('#posts')
Das wars dann auch schon.
Für Lightbox2 Support habe ich noch einen zweiten Parameter eingebaut um die Serien Funktion miteinzubringen.
Wenn ihr den zweiten Parameter mit eine String füllt wird rel="lightbox" entsprechend angepasst ;)
enlightMe('#slideshow', 'slider')
JAVASCRIPT:
-
/**
-
* Add lightbox to given css selector
-
*
-
* @example enlightMe('#content')
-
* @access public
-
* @param string cssSelector CSS Class or ID with . or #
-
* @param mixed serie Optional param string. Default false. Name of the series.
-
* @return void
-
**/
-
function enlightMe(cssSelector, serie)
-
{
-
var links = $$(cssSelector+' a');
-
var imglink = new RegExp("jpg|gif|png","i");
-
for(var i=0; i <links.length; i++) {
-
var url = links[i].href;
-
if(imglink.test(url)) {
-
if(serie!=undefined){ links[i].setAttribute('rel','lightbox['+serie+']'); }
-
else { links[i].setAttribute('rel','lightbox'); }
-
}
-
}
-
lb = new Lightbox(); lb.initialize();
-
}