MediaWiki:Common.js: Unterschied zwischen den Versionen

Aktuelle Version vom 14. Juli 2026, 11:12 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */

$(document).ready(function () {
  $('body').append(
    '<button id="btn-back" title="Zurück">&#8592;</button>' +
    '<button id="btn-top" title="Nach oben">&#8679;</button>'
  );
  if (mw.config.get('wgPageName') === 'Hauptseite') {
    $('#btn-back').hide();
  }
  $('#btn-back').on('click', function () { history.back(); });
  $('#btn-top').on('click', function () {
    $('html, body').animate({ scrollTop: 0 }, 400);
  });
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 300) {
      $('#btn-top').css({ opacity: '1', 'pointer-events': 'auto' });
    } else {
      $('#btn-top').css({ opacity: '0', 'pointer-events': 'none' });
    }
  });
});


/* ===== Bilder-Lightbox: Klick auf Rezeptbilder öffnet Vollbild-Ansicht mit Durchblättern ===== */
$(document).ready(function () {
    var $thumbs = $('#mw-content-text .thumbimage');
    if (!$thumbs.length) { return; }

    function fullImageUrl(src) {
        if (src.indexOf('/thumb/') === -1) { return src; }
        return src.replace('/thumb/', '/').replace(/\/[0-9]+px-[^/]+$/, '');
    }

    var images = [];
    $thumbs.each(function () {
        var $img = $(this);
        var $link = $img.closest('a.image');
        var $thumbinner = $img.closest('.thumbinner');
        var caption = $thumbinner.find('.thumbcaption').text().trim();
        images.push({
            full: fullImageUrl($img.attr('src')),
            caption: caption || $img.attr('alt') || '',
            $link: $link
        });
    });

    var $overlay = $(
        '<div class="cb-lightbox-overlay">' +
            '<button class="cb-lightbox-close" title="Schließen">&times;</button>' +
            '<button class="cb-lightbox-nav cb-lightbox-prev" title="Vorheriges Bild">&#10094;</button>' +
            '<button class="cb-lightbox-nav cb-lightbox-next" title="Nächstes Bild">&#10095;</button>' +
            '<div class="cb-lightbox-img-wrap"><img src="" alt=""></div>' +
            '<div class="cb-lightbox-caption"></div>' +
            '<div class="cb-lightbox-counter"></div>' +
        '</div>'
    );
    $('body').append($overlay);

    var $img2 = $overlay.find('.cb-lightbox-img-wrap img');
    var $caption = $overlay.find('.cb-lightbox-caption');
    var $counter = $overlay.find('.cb-lightbox-counter');
    var current = 0;

    function show(idx) {
        current = (idx + images.length) % images.length;
        var item = images[current];
        $img2.attr('src', item.full).attr('alt', item.caption);
        $caption.text(item.caption);
        $counter.text((current + 1) + ' / ' + images.length);
        $overlay.find('.cb-lightbox-nav').toggle(images.length > 1);
    }

    function openLb(idx) {
        show(idx);
        $overlay.addClass('cb-active');
        $('body').css('overflow', 'hidden');
    }

    function closeLb() {
        $overlay.removeClass('cb-active');
        $('body').css('overflow', '');
    }

    images.forEach(function (item, i) {
        if (!item.$link.length) { return; }
        item.$link.addClass('cb-lightbox-trigger').on('click', function (e) {
            e.preventDefault();
            openLb(i);
        });
    });

    $overlay.find('.cb-lightbox-close').on('click', closeLb);
    $overlay.find('.cb-lightbox-prev').on('click', function () { show(current - 1); });
    $overlay.find('.cb-lightbox-next').on('click', function () { show(current + 1); });
    $overlay.on('click', function (e) {
        if (e.target === this) { closeLb(); }
    });
    $(document).on('keydown', function (e) {
        if (!$overlay.hasClass('cb-active')) { return; }
        if (e.key === 'Escape') { closeLb(); }
        if (e.key === 'ArrowLeft') { show(current - 1); }
        if (e.key === 'ArrowRight') { show(current + 1); }
    });
});