<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<style>
/* Standard-Modal-Stile */
.myImgModal2 { display:flex;cursor: pointer; background:#aaaaaa; width:40px !important; margin:5px auto; padding: 3px; border: 1px solid #aaaaaa;}
.myImgModal2:hover {opacity: 0.7;}
#closeImg {position: absolute; top: 0px; right: 15px; color: #f1f1f1; font-size: 40px; font-weight: bold; padding:20px; z-index: 1000001;}
#closeImg:hover, .close:focus {color: #ff8000; text-decoration: none; cursor: pointer;}
#myModal {display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(28,28,28);}
#imgAll {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 98%; max-width: 98%; margin: 0; cursor:pointer; object-fit: scale-down;}
/* Stil für die EXIF-Box */
#exifData {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.9);
color: #1c1c1c;
padding: 15px;
border-radius: 5px 0 0 5px;
max-width: 250px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
max-height: 90%;
overflow-y: auto;
z-index: 1000000;
}
#exifData h4 {
margin-top: 0;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
#exifData p {
margin: 3px 0;
}
</style>
<div id="myModal">
<div id="closeImg">×</div>
<img id="imgAll" alt="Galeriebild in Modal-Ansicht" crossorigin="anonymous">
<div id="exifData" style="display:none;">
<h4>EXIF-Daten</h4>
<p id="exif-make"></p>
<p id="exif-model"></p>
<p id="exif-focal35"></p>
<p id="exif-shutter"></p>
<p id="exif-aperture"></p>
<p id="exif-iso"></p>
<p id="exif-not-found" style="display:none; color: red;">Keine EXIF-Daten gefunden.</p>
</div>
</div>
<script>
// START: Eingekapseltes Skript, um jQuery-Konflikte zu vermeiden
(function($) {
// Hilfsfunktion zur Formatierung rationaler Werte (Bruch) wie 1/125 s
function formatRational(tagValue) {
if (Array.isArray(tagValue) && tagValue.length === 2) {
const numerator = tagValue[0];
const denominator = tagValue[1];
if (denominator === 0) return 'N/A';
const value = numerator / denominator;
if (denominator === 1) return numerator.toString();
if (value < 1 && value > 0) {
return `1/${Math.round(1 / value)}`;
}
return value.toFixed(1);
}
return tagValue;
}
// Funktion zum Auslesen und Anzeigen der EXIF-Daten
function displayExifData(imgElement) {
document.getElementById('exifData').style.display = 'none';
document.getElementById('exif-not-found').style.display = 'none';
EXIF.getData(imgElement, function() {
const allTags = EXIF.getAllTags(this);
// Datenprüfung
if (!allTags || !allTags.Make) {
document.getElementById('exif-not-found').style.display = 'block';
document.getElementById('exifData').style.display = 'block';
document.getElementById('exif-make').innerText = 'Hersteller: N/A';
document.getElementById('exif-model').innerText = 'Modell: N/A';
document.getElementById('exif-focal35').innerText = 'Brennweite: N/A';
document.getElementById('exif-shutter').innerText = 'Belichtungszeit: N/A';
document.getElementById('exif-aperture').innerText = 'Blende: N/A';
document.getElementById('exif-iso').innerText = 'ISO-Wert: N/A';
return;
}
// Werte auslesen
const make = EXIF.getTag(this, "Make") || 'Unbekannt';
const model = EXIF.getTag(this, "Model") || 'N/A';
let focalLength35mm = EXIF.getTag(this, "FocalLengthIn35mmFilm");
const focalLength = EXIF.getTag(this, "FocalLength");
if (focalLength35mm) {
focalLength35mm = `${focalLength35mm} mm (KB-Äquiv.)`;
} else if (focalLength) {
focalLength35mm = `${formatRational(focalLength)} mm (Real)`;
} else {
focalLength35mm = 'N/A';
}
const exposureTime = EXIF.getTag(this, "ExposureTime");
const shutter = exposureTime ? `${formatRational(exposureTime)} s` : 'N/A';
const aperture = EXIF.getTag(this, "FNumber");
const fValue = aperture ? `f/${formatRational(aperture)}` : 'N/A';
const iso = EXIF.getTag(this, "ISOSpeedRatings") || 'N/A';
// Werte im Modal anzeigen
document.getElementById('exif-make').innerText = `Hersteller: ${make}`;
document.getElementById('exif-model').innerText = `Modell: ${model}`;
document.getElementById('exif-focal35').innerText = `Brennweite: ${focalLength35mm}`;
document.getElementById('exif-shutter').innerText = `Belichtungszeit: ${shutter}`;
document.getElementById('exif-aperture').innerText = `Blende: ${fValue}`;
document.getElementById('exif-iso').innerText = `ISO-Wert: ${iso}`;
document.getElementById('exifData').style.display = 'block';
});
}
// Ihr ursprünglicher Select-Befehl
ImageLoad =
{{template==144.start}}$('.gallpic'){{template==144.end}}
{{template!==144.start}}$('#PicMainCont'){{template!==144.end}}
ImageLoad.after('<div style="margin:15px 0 10px 0;"><img title="Ein Klick führt zur Modal-Ansicht" class="myImgModal2" src="{{gallery_dl_link}}">Modal-Ansicht</div>');
$('.myImgModal2').click(function(){
$('body').css('overflow','hidden');
const imgSrc = $(this).attr('src');
$('#imgAll').attr('src', imgSrc);
$('#myModal').fadeIn(500);
// Bild geladen? Dann EXIF-Daten auslesen
$('#imgAll').off('load').one('load', function() {
displayExifData(this);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
// Schließ-Logik
$('#myModal').off('click').on('click', function(e){
if (e.target.id === 'myModal' || e.target.id === 'closeImg') {
$('body').css('overflow','auto');
$('#exifData').hide();
$('#myModal').hide(500);
}
});
// Schließen-Button
$('#closeImg').off('click').on('click', function() {
$('body').css('overflow','auto');
$('#exifData').hide();
$('#myModal').hide(500);
});
});
})(jQuery);
// ENDE: Eingekapseltes Skript
</script>
Technik · 
