Akkordion & Mediabox nach Update ohne Funktion

Hallo zusammen,

nach einem Update von 2.11.11 -> 3.2.9 funktioniert weder die Mediabox noch die Akkordion-Funktionalität.
Das Wechseln von Mootools auf JQuery bzw. das Nutzen des Google-Scripts anstatt der lokalen Varianten bringen dabei keine Änderung.

Die Akkordion Elemente sind aktuell alle aufgeklappt und lassen sich nicht bewegen.
Die Lightbox-Links werden nur normal, anstatt in der Lightbox geöffnet. (Werden über rel="lightbox" angesprochen)

Hat jemand Erfahrung damit ?
Anbei noch der aktuell eingebundene JS-Code:

Code:

---

<script type='text/javascript'>
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
        new Accordion($$('div.toggler'), $$('div.accordion'),
        {
                display: -1,
                alwaysHide: true,
                opacity: false,

                onActive: function(toggler, i)
                {
                        toggler.getFirst() ? toggler.getFirst().toggler.addClass('active') : toggler.addClass('active');
                },

                onBackground: function(toggler, i)
                {
                        toggler.getFirst() ? toggler.getFirst().toggler.removeClass('active') : toggler.removeClass('active');
                }
        });
});
//--><!]]>
</script>

<script type="text/javascript" src="assets/mootools/mediabox/1.4.6/js/mediabox.js"></script>
<script type="text/javascript">
  /* <![CDATA[ */
  (function($) {
    window.addEvent('domready', 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]));
      });
      $('mbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
      });
    });
  })(document.id);
  /* ]]> */
</script>

---

Hallo kpeter,

Du hast das Originaltemplate moo_accordion.xhtml verändert, indem Du "display: -1," eingefügt hast, um alle Akkordeons zuerst geschlossen darzustellen. Das abgeänderte Template ist im Backend über LAYOUT -> TEMPLATES zu erreichen.

Die mootools templates haben sich alle geändert, so dass Du das moo_accordion.xhtml neu erstellen und dann Deine Änderung im neuen Template ergänzen musst.
Bei mir sieht das so aus:

Code:

---

<script type="text/javascript">
  /* <![CDATA[ */
  (function() {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        display: -1, // -1, alle Akkordeons sind am Anfang eingeklappt
        alwaysHide: true,
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
      $$('div.toggler').each(function(el) {
        el.setProperty('role', 'tab');
        el.setProperty('tabindex', 0);
        el.addEvents({
          'keypress': function(event) {
            if (event.code == 13) {
              this.fireEvent('click');
            }
          },
          'focus': function() {
            this.addClass('hover');
          },
          'blur': function() {
            this.removeClass('hover');
          },
          'mouseenter': function() {
            this.addClass('hover');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.ce_accordion').each(function(el) {
        el.setProperty('role', 'tablist');
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })();
  /* ]]> */
</script>

---

Bei der Mediabox wird es wohl ähnlich sein.

Peter

Danke Peter, das Template hatte ich total übersehen.
Lightbox funktioniert jetzt auch, lag dann nur an dem Fehler im Akkordion JS ;-)