MediaWiki:Common.js: Unterschied zwischen den Versionen
Aus LNTwww
Tasnad (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
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';
});
})();