Imagemap und Mediabox

Tach beisammen,

ich hoffe ich bin hier in der richtigen Rubrik mit meiner Frage.

Ich würde gern eine Imagemap via Inhaltselement HTML einbauen und die dort verlinkten Flächen sollen ein Bild in der Mediabox öffnen. Leider hört die Mediabox nur auf <a rel="lightbox"> und nicht <area rel="lightbox"> Elemente. Kann mir jemand sagen wo ich dieses Element im JS der Mediabox hinzufügen kann? Finde aktuell nichts in der mediabox_src.js

Es gibt hier eine Funktion die wohl die Elemente definiert....nur check ich die Beschreibung nicht ganz.

Code:

---

       
Elements.implement({
/*
options:  Optional options object, see Mediabox.open()
linkMapper:  Optional function taking a link DOM element and an index as arguments and returning an array containing 3 elements: the image URL and the image caption (may contain HTML)
linksFilter:  Optional function taking a link DOM element and an index as arguments and returning true if the element is part of the image collection that will be shown on click, false if not. "this" refers to the element that was clicked. This function must always return true when the DOM element argument is "this".
*/

---

Im moo_mediabox.tpl wird außerdem folgender Scan aufgerufen

Code:

---

Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};

---

Genau da müsste noch das "area" mit rein.

Wäre dankbar für Hilfe.

Gruß

Zitat:

---

Zitat von Kahmoon

Code:

---

(...)
  var links = $$("a").filter(function(el) {
(...)

---

---

Probiere doch mal stattdessen:

Code:

---

(...)
  var links = $$("area").filter(function(el) {
(...)

---

Das hab ich schon getestet....mag leider nicht. Ich brauche leider auch beide Tags. a und area

Soooo Problem habe ich jetzt mit einem zusätzlichen Mootools Aufruf im Layout gelöst. Hier wird geprüft ob ein Element mit der ID "Map" (Standardbezeichnung beim erstellen von Imagemaps) vorhanden ist und liest dann alle area-Objekte aus. Diese werden dann mit einem Eventhandler (click) versehen.

Code:

---

<script type="text/javascript">
<!--
window.addEvent('domready', function() {
        if($('Map'))
        {
                function mediabox() {
                        Mediabox.open(this.href, 'javascript trigger');
                        return false;
                        };
       
                $('Map').getElements('area').addEvent('click',mediabox);
        }
});
//-->
</script>

---

Vielleicht für den ein oder anderen hilfreich.

Gruß

Man kann die AREAs für imagemaps (usemap) genauso ansprechen wie die As. Dazu eine Kopie des Templates moo_mediabox erstellen abändern und im Layout benutzen.

HTML-Code:

---

...
var links = $$('a').filter(function(el) {
... wird zu
var links = $$('a, area').filter(function(el) {
...

---

Zwischen den Hochkommas steht ein CSS-Selektor.

Das Element (AREA, A) muss ein HREF und sollte einen TITLE haben.

Zusätzlich benötigt das Element noch ein Attribut:

Für HTML5

HTML-Code:

---

data-lightbox="meinAlbum Breite Höhe"

---

Für XHTML

HTML-Code:

---

rel="lightbox[meinAlbum Breite Höhe]"

---

Breite und Höhe sind optional und sind entweder Integer, z.B. 800, oder ein Prozentwert z.B. 50%.

Es wird, entgegen vieler Beschreibungen im Internet, kein Kürzel wie z.B. "external, flash, video" oder sonstiges benötigt und von der Mediabox auch nicht beachtet.

Elemente mit identischem Albumnamen werden in der gleichen Lightbox zum Weiterblättern präsentiert. Sollte ein Element des Albums doppelt vorhanden sein, wird es ignoriert.

edit:

Der Albumname ist auch optional. Ohne Albumname, oder mit unterschiedlichen Albumnamen je Element, werden einzelne Elemente in der Lightbox geöffnet aber kein Weiterblättern auf ein nächstes Element angeboten.