Mediabox bei Klick auf Overlay nicht schließen

[Tine]

Hallo zusammen,

leider kenne ich mich mit JavaScript nicht gut aus, so dass ich etwas Hilfe benötige Wie muss ich das moo_mediabox.html5-Template anpassen, damit die Mediabox sich ausschließlich durch den Close-Link schließen lässt?

Template:

<?php

// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script>
(function($) {
window.addEvent('domready', function() {
var links = $$('a').filter(function(el) {
return el.getAttribute('data-lightbox') != null;
});
$$(links).mediabox({
// Put custom options here
}, function(el) {
return [el.href, el.title, el.getAttribute('data-lightbox')];
}, function(el) {
var data = this.getAttribute('data-lightbox').split(' ');
return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
});
$('mbImage').addEvent('swipe', function(e) {
(e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
});
});
})(document.id);
</script>

---

In der mediabox-uncompressed.js habe ich folgende Stellen ausfindig gemacht:

overlay = new Element("div", {id: "mbOverlay"}).addEvent("click", close),


function keyDown(event) {
if (options.keyboardAlpha) {
switch(event.code) {
case 27: // Esc
case 88: // 'x'
case 67: // 'c'
close();
break;
case 37: // Left arrow
case 80: // 'p'
previous();
break;
case 39: // Right arrow
case 78: // 'n'
next();
}
} else {
switch(event.code) {
case 27: // Esc
close();
break;
case 37: // Left arrow
previous();
break;
case 39: // Right arrow
next();
}
}
if (options.keyboardStop) { return false; };
}

Vielen lieben Dank schon mal für Eure Hilfe!

[Tine]

Alle JavaScript-Experten mitten in der Fastnachts-/Karnevalspause?
Hmmm. Dann hoffe ich, dass vielleicht nach Aschermittwoch jemand eine Idee hat
Helau! Alaaf! Narri-Narro!

[Tine]

Ist denn der Ansatz, das Template anzupassen, grundsätzlich der falsche Weg?! Ich freue mich über jede Hilfe!

[Flex]

Versuch es mal so.

<?php

// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      var links = $$('a').filter(function(el) {
        return el.getAttribute('data-lightbox') != null;
      });
      $$(links).mediabox({
// Put custom options here
}, function(el) {
  return [el.href, el.title, el.getAttribute('data-lightbox')];
}, function(el) {
  var data = this.getAttribute('data-lightbox').split(' ');
  return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
});
      $('mbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
      });
      $('mbOverlay').removeEvents('click');
    });
  })(document.id);
</script>

[lucina]

Ich glaube, das Plugin Mediabox ist der falsche Weg - nimm eins, das modale Boxen von Haus aus kann. Zum Beispiel von der Liste unter http://jquery-plugins.net/tag/modal-box.

Wie Du das dann einbauen kannst erfährst du unter http://ck2013.may17.de/home.html.

[Tine]

Hallo zusammen,

vielen Dank für Eure Unterstützung. Als Lösung kam jetzt die Erweiterung „srlayer“ zum Einsatz:

https://contao.org/de/extension-list...000019.de.html

Liebe Grüße
Tine