MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus LNTwww
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Maintenance script (Diskussion | Beiträge)
Add simple image lightbox
Zeile 5: Zeile 5:
     offset: 40
     offset: 40
});
});
/* Simple image lightbox */
(function() {
  // Create overlay
  var overlay = document.createElement('div');
  overlay.id = 'img-lightbox';
  overlay.style.cssText = 'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;cursor:pointer;justify-content:center;align-items:center;';
  var img = document.createElement('img');
  img.style.cssText = 'max-width:90%;max-height:90%;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,0.5);';
  overlay.appendChild(img);
  document.body.appendChild(overlay);
  // Close on click
  overlay.addEventListener('click', function() {
    overlay.style.display = 'none';
  });
  // Close on Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') overlay.style.display = 'none';
  });
  // Intercept image thumbnail clicks
  document.addEventListener('click', function(e) {
    var link = e.target.closest('.image, a.mw-file-description');
    if (!link) return;
    var thumb = link.querySelector('img');
    if (!thumb) return;
    e.preventDefault();
    e.stopPropagation();
    // Get full-size image URL from the link href or construct from thumb src
    var fullSrc = '';
    var href = link.getAttribute('href') || '';
    // The link points to /File:Name.png - we need the actual image URL
    // Thumb URLs look like: /images/thumb/a/ab/Name.png/300px-Name.png
    // Full URLs look like: /images/a/ab/Name.png
    var thumbSrc = thumb.getAttribute('src') || '';
    if (thumbSrc.indexOf('/thumb/') !== -1) {
      // Remove /thumb/ and the last /NNNpx-filename part
      fullSrc = thumbSrc.replace('/thumb/', '/').replace(/\/[^\/]+$/, '');
    } else {
      fullSrc = thumbSrc;
    }
    img.src = fullSrc;
    overlay.style.display = 'flex';
  });
})();

Version vom 25. Februar 2026, 17:55 Uhr

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

$('body').scrollspy({
    target: '.bs-docs-sidebar',
    offset: 40
});

/* Simple image lightbox */
(function() {
  // Create overlay
  var overlay = document.createElement('div');
  overlay.id = 'img-lightbox';
  overlay.style.cssText = 'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;cursor:pointer;justify-content:center;align-items:center;';
  var img = document.createElement('img');
  img.style.cssText = 'max-width:90%;max-height:90%;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,0.5);';
  overlay.appendChild(img);
  document.body.appendChild(overlay);

  // Close on click
  overlay.addEventListener('click', function() {
    overlay.style.display = 'none';
  });

  // Close on Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') overlay.style.display = 'none';
  });

  // Intercept image thumbnail clicks
  document.addEventListener('click', function(e) {
    var link = e.target.closest('.image, a.mw-file-description');
    if (!link) return;
    var thumb = link.querySelector('img');
    if (!thumb) return;

    e.preventDefault();
    e.stopPropagation();

    // Get full-size image URL from the link href or construct from thumb src
    var fullSrc = '';
    var href = link.getAttribute('href') || '';
    // The link points to /File:Name.png - we need the actual image URL
    // Thumb URLs look like: /images/thumb/a/ab/Name.png/300px-Name.png
    // Full URLs look like: /images/a/ab/Name.png
    var thumbSrc = thumb.getAttribute('src') || '';
    if (thumbSrc.indexOf('/thumb/') !== -1) {
      // Remove /thumb/ and the last /NNNpx-filename part
      fullSrc = thumbSrc.replace('/thumb/', '/').replace(/\/[^\/]+$/, '');
    } else {
      fullSrc = thumbSrc;
    }

    img.src = fullSrc;
    overlay.style.display = 'flex';
  });
})();