[img_Lupe={{breite}}]
 

[/img]
 

<img class="lupe" style="width:{{breite}} !important; margin-bottom:5px;" src="
 

">
 

Reihenfolge: 0
 

//files.homepagemodules.de/b104774/f46t1197p2706n78_iSdJfZLk.jpg
 

[imgStyle={{style}}={{titel}}]
 

[/img]
 

<img style="{{style}}; cursor:pointer;" title="{{titel}}" class="formatStyle" src="
 

">
 

Reihenfolge: 0
 

//img.homepagemodules.de/ds/static/gaia/picture.png
 

<div onclick="xob_insert('[img_Lupe=500px]','[/img]')" class="xob_icon_cont" id="icon_5002"><img title="Lupe einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/f46t1197p2706n78_iSdJfZLk.jpg"></div>
 

[img_Lupe=500px]https://files.homepagemodules.de/b104774/f46t2139p7441n4_rycHIWvb.jpg[/img]
 

[img_Lupe=500px][[File:Bild3.jpg|none|fullsize]][/img]
 

<div onclick="xob_insert('[imgStyle=width:200px; background: #5B8EDF; border:5px double #285BAC; border-radius:16px; padding:10px;=Tooltipp für Bildbeschreibung]','[/img]')" class="xob_icon_cont" id="icon_5003"><img title="Bild Style einfügen" class="xob_icon" src="//img.homepagemodules.de/ds/static/gaia/picture.png"></div>
 

[imgStyle=width:200px; background: #5B8EDF; border:5px double #285BAC; border-radius:16px; padding:10px;=Tooltipp für Bildbeschreibung]https://files.homepagemodules.de/b104774/f46t2139p7441n4_rycHIWvb.jpg[/img]
 

[imgStyle=width:200px; background: #5B8EDF; border:5px double #285BAC; border-radius:16px; padding:10px;=Tooltipp für Bildbeschreibung][[File:Bild3.jpg|none|400px|400px]] [/img]
 

<!-- GPU beschleunigte ULTRA-LUPE, kompakt, minimiert und schnell! -->
<style>
/* Größe der Lupe + Format */
.magnifier {width:200px; height:200px; display:none; position:absolute; border:2px solid #000; border-radius:50%; overflow:hidden; pointer-events:none !important; z-index:99999;}
 
/* Bilder in der Lupe werden durch GPU beschleunigt (transform + will-change) */
.magnifier img{ position:absolute; top:0; left:0; will-change:transform; transform-origin: top left;} 
 
/* Tooltips ausblenden, wenn Lupe aktiv */
.lupe-active .ui-tooltip { display:none !important;}
 
/* Lupe-Button, Farbe + Form */
.lupeBtn {background:#ddd; font-size:13px; padding:2px 8px; margin-right:10px; float:right; cursor:pointer;}
.lupeBtn:hover {background:#fff;}
.lupe-active .lupeBtn {background:#aaf; }
</style>
 
<script>
document.addEventListener("DOMContentLoaded",()=>{
  /* 1. Hilfsfunktionen URL-Cleaner */
  const isRealImage = url => /\.(jpe?g|png|gif|webp)$/i.test(url) || /\/resize\/\d+x\d+\//.test(url);
  const decodeFilePhp = url => {if(!url || !url.includes("file.php?url=")) return url;try {const u = new URL(url, location.origin); return decodeURIComponent(u.searchParams.get("url"));} catch(e){ return url; }};
  const extractFromHTML = html => {if(!html) return null;const div = document.createElement("div");div.innerHTML = html.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&");const img = div.querySelector("img");return img ? img.src : null;};
  const extractOriginal = raw => {if(!raw) return null; raw = decodeFilePhp(raw);if(raw.includes("<") || raw.includes("&lt;")){const inner = extractFromHTML(raw);return inner && isRealImage(inner) ? decodeFilePhp(inner).replace(/\/resize\/\d+x\d+\//,"/") : null;} return isRealImage(raw) ? raw.replace(/\/resize\/\d+x\d+\//,"/") : null;};
  const isMobile = /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
 
  /* 2. Lupe-Einstellungen */
  let defaultZoom = 2.5; // Start-Zoom
  let maxZoom = 15; // Maximaler Zoom
  let zoom = defaultZoom; let active = false; let lastMove = null; const mag = document.createElement("div"); mag.className = "magnifier"; const magImg = document.createElement("img"); mag.appendChild(magImg); document.body.appendChild(mag);
 
  /* 3. GPU gestützte Bildumsetzung */  
  function redrawMagnifier(){if(!lastMove) return; const { e, bx, by, bw } = lastMove; const mw = mag.offsetWidth; const mh = mag.offsetHeight; const halfW = mw/2; const halfH = mh/2; mag.style.display = "inline-block"; mag.style.left = (e.pageX - halfW) + "px"; mag.style.top  = (e.pageY - halfH) + "px"; magImg.style.width  = bw + "px"; magImg.style.height = "auto"; magImg.style.maxWidth = "none"; magImg.style.maxHeight = "none"; const scale = zoom; magImg.style.transform = `translate3d(${-(bx*scale)+halfW}px, ${-(by*scale)+halfH}px, 0) scale(${scale})`;}
 
  /* 4. Zentrale Lupensteuerung */
  const attach = (el, srcFn, condFn, calcFn) => {const hide = () => { mag.style.display = "none"; }; el.addEventListener("mousemove", e => {if(!condFn()) return hide(); if(!lastMove || lastMove.el !== el) zoom = defaultZoom; const r = el.getBoundingClientRect();let bx = e.clientX - r.left;let by = e.clientY - r.top;let bw = el.offsetWidth || r.width;if(calcFn) ({bx,by,bw} = calcFn(e,el,r));magImg.src = srcFn();lastMove = { e, bx, by, bw, el };redrawMagnifier();});el.addEventListener("mouseleave", hide);
 
  // *** OPTION A - KLICK-ZOOM - Linke & Rechte Maustaste ***
  if (!isMobile) {el.addEventListener("click", e => {if(!condFn()) return;e.preventDefault();e.stopPropagation();zoom = Math.min(zoom + 1, maxZoom);redrawMagnifier();}, true); el.addEventListener("contextmenu", e => {if(!condFn()) return;e.preventDefault();zoom = Math.max(zoom - 1, 1);redrawMagnifier();});}
 
  // *** OPTION B - MAUSRAD-ZOOM ***
  if (!isMobile) {el.addEventListener("wheel", e => {if(!condFn()) return;e.preventDefault();e.stopImmediatePropagation();zoom += (e.deltaY < 0 ? 0.3 : -0.3);zoom = Math.max(1, Math.min(zoom, maxZoom));redrawMagnifier();}, { passive:false });}
  
  } // <-- Muss stehen bleiben, schließt die zentrale Lupensteuerung
 
  // *** OPTION C - LUPE in den BEITRÄGEN mit neuen Foren-Code + Bild-Style ***
  document.querySelectorAll(".container_lupe img.lupe, img.formatStyle").forEach(img => {const raw = img.getAttribute("src");if(!raw) return;const inner = raw.includes("img") ? extractFromHTML(raw) : raw;const original = extractOriginal(inner);if(!original) return;const clean = document.createElement("img");clean.className = img.className;clean.src = original;clean.dataset.lupeFull = original;["style","width","height","alt","title","data-title"].forEach(a => img.hasAttribute(a) && clean.setAttribute(a, img.getAttribute(a)));img.replaceWith(clean);});document.querySelectorAll("img.lupe").forEach(img => attach(img, () => img.dataset.lupeFull || img.src, () => true));
  
  // *** OPTION D - LUPE in der BILDERGALERIE (Lupe + Button) ***
  const btn = Object.assign(document.createElement("span"),{className:"lupeBtn", textContent:"\u{1F50D} Lupe",onclick:()=>{active = !active;mag.style.display = "none";magImg.src = "";zoom = defaultZoom;document.body.classList.toggle("lupe-active", active);}});const bar = document.querySelector("#foptions_bar");if(bar) bar.before(btn);document.querySelectorAll(".gallpic.loader").forEach(gal=>{const img = new Image();let src = gal.closest("a")?.href || gal.querySelector("img")?.src || gal.style.backgroundImage.replace(/^url\(["']?/,"").replace(/["']?\)$/,""); src = extractOriginal(src); if(!src) return;img.src = src; img.onload = () => {if(gal.title) gal.dataset._savedTitle = gal.title; attach(gal, ()=>img.src, ()=>active, (e,el,r)=>{if(active) gal.removeAttribute("title"); else if(gal.dataset._savedTitle) gal.setAttribute("title", gal.dataset._savedTitle);const x = e.clientX - r.left;const y = e.clientY - r.top;const cw = r.width;const ch = r.height; const iw = img.naturalWidth;const ih = img.naturalHeight;const scale = Math.min(cw/iw, ch/ih);const bw = iw * scale; const ox = (cw - bw) / 2;const oy = (ch - ih * scale) / 2;return { bx: x - ox, by: y - oy, bw };});};});                                                                                                                     
                                                                                                                           
});
</script>
 

<!-- GPU beschleunigte ULTRA-LUPE, kompakt, minimiert und schnell! -->
<style>
/* Größe der Lupe + Format */
.magnifier {width:200px; height:200px; display:none; position:absolute; border:2px solid #000; border-radius:50%; overflow:hidden; pointer-events:none !important; z-index:99999;}
 
/* Bilder in der Lupe werden durch GPU beschleunigt (transform + will-change) */
.magnifier img{ position:absolute; top:0; left:0; will-change:transform; transform-origin: top left;} 
</style>
 
<script>
document.addEventListener("DOMContentLoaded",()=>{
  /* 1. Hilfsfunktionen URL-Cleaner */
  const isRealImage = url => /\.(jpe?g|png|gif|webp)$/i.test(url) || /\/resize\/\d+x\d+\//.test(url);
  const decodeFilePhp = url => {if(!url || !url.includes("file.php?url=")) return url;try {const u = new URL(url, location.origin); return decodeURIComponent(u.searchParams.get("url"));} catch(e){ return url; }};
  const extractFromHTML = html => {if(!html) return null;const div = document.createElement("div");div.innerHTML = html.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&");const img = div.querySelector("img");return img ? img.src : null;};
  const extractOriginal = raw => {if(!raw) return null; raw = decodeFilePhp(raw);if(raw.includes("<") || raw.includes("&lt;")){const inner = extractFromHTML(raw);return inner && isRealImage(inner) ? decodeFilePhp(inner).replace(/\/resize\/\d+x\d+\//,"/") : null;} return isRealImage(raw) ? raw.replace(/\/resize\/\d+x\d+\//,"/") : null;};
 
  /* 2. Lupe-Einstellungen */
  let defaultZoom = 2.5; // Start-Zoom
  let zoom = defaultZoom; let active = false; let lastMove = null; const mag = document.createElement("div"); mag.className = "magnifier"; const magImg = document.createElement("img"); mag.appendChild(magImg); document.body.appendChild(mag);
 
  /* 3. GPU gestützte Bildumsetzung */  
  function redrawMagnifier(){if(!lastMove) return; const { e, bx, by, bw } = lastMove; const mw = mag.offsetWidth; const mh = mag.offsetHeight; const halfW = mw/2; const halfH = mh/2; mag.style.display = "inline-block"; mag.style.left = (e.pageX - halfW) + "px"; mag.style.top  = (e.pageY - halfH) + "px"; magImg.style.width  = bw + "px"; magImg.style.height = "auto"; magImg.style.maxWidth = "none"; magImg.style.maxHeight = "none"; const scale = zoom; magImg.style.transform = `translate3d(${-(bx*scale)+halfW}px, ${-(by*scale)+halfH}px, 0) scale(${scale})`;}
 
  /* 4. Zentrale Lupensteuerung */
  const attach = (el, srcFn, condFn, calcFn) => {const hide = () => { mag.style.display = "none"; }; el.addEventListener("mousemove", e => {if(!condFn()) return hide(); if(!lastMove || lastMove.el !== el) zoom = defaultZoom; const r = el.getBoundingClientRect();let bx = e.clientX - r.left;let by = e.clientY - r.top;let bw = el.offsetWidth || r.width;if(calcFn) ({bx,by,bw} = calcFn(e,el,r));magImg.src = srcFn();lastMove = { e, bx, by, bw, el };redrawMagnifier();});el.addEventListener("mouseleave", hide); }
 
  // *** OPTION C - LUPE in den BEITRÄGEN mit neuen Foren-Code + Bild-Style ***
  document.querySelectorAll(".container_lupe img.lupe, img.formatStyle").forEach(img => {const raw = img.getAttribute("src");if(!raw) return;const inner = raw.includes("img") ? extractFromHTML(raw) : raw;const original = extractOriginal(inner);if(!original) return;const clean = document.createElement("img");clean.className = img.className;clean.src = original;clean.dataset.lupeFull = original;["style","width","height","alt","title","data-title"].forEach(a => img.hasAttribute(a) && clean.setAttribute(a, img.getAttribute(a)));img.replaceWith(clean);});document.querySelectorAll("img.lupe").forEach(img => attach(img, () => img.dataset.lupeFull || img.src, () => true));
                                                                                                                          
});
</script>
 

<!-- GPU beschleunigte ULTRA-LUPE, kompakt, minimiert und schnell! -->
<style>
/* Größe der Lupe + Format */
.magnifier {width:200px; height:200px; display:none; position:absolute; border:2px solid #000; border-radius:50%; overflow:hidden; pointer-events:none !important; z-index:99999;}
 
/* Bilder in der Lupe werden durch GPU beschleunigt (transform + will-change) */
.magnifier img{ position:absolute; top:0; left:0; will-change:transform; transform-origin: top left;} 
 
/* Tooltips ausblenden, wenn Lupe aktiv */
.lupe-active .ui-tooltip { display:none !important;}
 
/* Lupe-Button, nur Bildergalerie */
.lupeBtn {background:#ddd; font-size:13px; padding:2px 8px; margin-right:10px; float:right; cursor:pointer;}
.lupeBtn:hover {background:#fff;}
.lupe-active .lupeBtn {background:#aaf; }
</style>
 
<script>
document.addEventListener("DOMContentLoaded",()=>{
  /* 1. Hilfsfunktionen URL-Cleaner */
  const isRealImage = url => /\.(jpe?g|png|gif|webp)$/i.test(url) || /\/resize\/\d+x\d+\//.test(url);
  const decodeFilePhp = url => {if(!url || !url.includes("file.php?url=")) return url;try {const u = new URL(url, location.origin); return decodeURIComponent(u.searchParams.get("url"));} catch(e){ return url; }};
  const extractFromHTML = html => {if(!html) return null;const div = document.createElement("div");div.innerHTML = html.replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");const img = div.querySelector("img");return img ? img.src : null;};
  const extractOriginal = raw => {if(!raw) return null; raw = decodeFilePhp(raw);if(raw.includes("<") || raw.includes("<")){const inner = extractFromHTML(raw);return inner && isRealImage(inner) ? decodeFilePhp(inner).replace(/\/resize\/\d+x\d+\//,"/") : null;} return isRealImage(raw) ? raw.replace(/\/resize\/\d+x\d+\//,"/") : null;};
 
  /* 2. Lupe-Einstellungen */
  let defaultZoom = 2.5; // Start-Zoom
  let zoom = defaultZoom; let active = false; let lastMove = null; const mag = document.createElement("div"); mag.className = "magnifier"; const magImg = document.createElement("img"); mag.appendChild(magImg); document.body.appendChild(mag);
 
  /* 3. GPU gestützte Bildumsetzung */  
  function redrawMagnifier(){if(!lastMove) return; const { e, bx, by, bw } = lastMove; const mw = mag.offsetWidth; const mh = mag.offsetHeight; const halfW = mw/2; const halfH = mh/2; mag.style.display = "inline-block"; mag.style.left = (e.pageX - halfW) + "px"; mag.style.top  = (e.pageY - halfH) + "px"; magImg.style.width  = bw + "px"; magImg.style.height = "auto"; magImg.style.maxWidth = "none"; magImg.style.maxHeight = "none"; const scale = zoom; magImg.style.transform = `translate3d(${-(bx*scale)+halfW}px, ${-(by*scale)+halfH}px, 0) scale(${scale})`;}
 
  /* 4. Zentrale Lupensteuerung */
  const attach = (el, srcFn, condFn, calcFn) => {const hide = () => { mag.style.display = "none"; }; el.addEventListener("mousemove", e => {if(!condFn()) return hide(); if(!lastMove || lastMove.el !== el) zoom = defaultZoom; const r = el.getBoundingClientRect();let bx = e.clientX - r.left;let by = e.clientY - r.top;let bw = el.offsetWidth || r.width;if(calcFn) ({bx,by,bw} = calcFn(e,el,r));magImg.src = srcFn();lastMove = { e, bx, by, bw, el };redrawMagnifier();});el.addEventListener("mouseleave", hide); } 
  
  // *** OPTION D – LUPE in der BILDERGALERIE (Lupe + Button) ***
  const btn = Object.assign(document.createElement("span"),{className:"lupeBtn", textContent:"\u{1F50D} Lupe",onclick:()=>{active = !active;mag.style.display = "none";magImg.src = "";zoom = defaultZoom;document.body.classList.toggle("lupe-active", active);}});const bar = document.querySelector("#foptions_bar");if(bar) bar.before(btn);document.querySelectorAll(".gallpic.loader").forEach(gal=>{const img = new Image();let src = gal.closest("a")?.href || gal.querySelector("img")?.src || gal.style.backgroundImage.replace(/^url\(["']?/,"").replace(/["']?\)$/,""); src = extractOriginal(src); if(!src) return;img.src = src; img.onload = () => {if(gal.title) gal.dataset._savedTitle = gal.title; attach(gal, ()=>img.src, ()=>active, (e,el,r)=>{if(active) gal.removeAttribute("title"); else if(gal.dataset._savedTitle) gal.setAttribute("title", gal.dataset._savedTitle);const x = e.clientX - r.left;const y = e.clientY - r.top;const cw = r.width;const ch = r.height; const iw = img.naturalWidth;const ih = img.naturalHeight;const scale = Math.min(cw/iw, ch/ih);const bw = iw * scale; const ox = (cw - bw) / 2;const oy = (ch - ih * scale) / 2;return { bx: x - ox, by: y - oy, bw };});};});                                                                                                                     
                                                                                                                           
});
</script>