Lightbox & area tags

nordi

Erfahrenes Mitglied
Hi Leute, ich hab ne Frage zu einer Lightboxmodifikation. Ich benutze die Lightbox-Modifikation "Suckerfish HoverLightbox Redux". Bei dieser werden nämlich bei der Galerierfunktion der Lightbox unten neben dem Closebutton 2 Pfeile angezeigt, die dem User angeben, dass noch weitere Bilder sich in der Galerie befinden.

Zum eigentlichen Problem. Laufen tut die Lightbox wunderbar. Ich habe aber ein paar Grafiken mit area-tags versehen um einen Link darauf zu positionieren. Diese erkennt aber die Lightbox nicht - ich hab auch schon im Quellcode die Passage gefunden, warum es nicht funktioniert. Im Quellcode werden nur die reinen <a href ..> Tags abgegriffen. Wie kann man dem Javascript beibringen, dass er auch die <area ... > abgreift?

HTML:
var Lightbox = Class.create();

Lightbox.prototype = {

	// initialize()
	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
	// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
	// the function inserts html at the bottom of the page which is used to display the shadow
	// overlay and the image container.
	//
	initialize: function() {
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];

			var relAttribute = String(anchor.getAttribute('rel'));

			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () { myLightbox.start(this); return false;}
			}
		}

Ich hab euch mal im Anhang das komplette Skript angefügt, wenn ich damit was anfangen könnt. Schonmal danke für eure Hilfe - schönen Abend noch! Wenn ihr mehr braucht, sagt bitte Bescheid!
 

Anhänge

Bei der Orginal-Lightbox werden die Area-Tags abgegriffen, und zwar wie folgt, glaube ich:

HTML:
updateImageList: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');
		var areas = document.getElementsByTagName('area');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

		// loop through all area tags
		// todo: combine anchor & area tag loops
		for (var i=0; i< areas.length; i++){
			var area = areas[i];
			
			var relAttribute = String(area.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				area.onclick = function () {myLightbox.start(this); return false;}
			}
		}
	},

Kann man die beiden Codeschnippsel irgendwie kombinieren? Hab schon einiges ausprobiert, aber leider ohne Erfolg!?
 

Neue Beiträge

Zurück