Hallo Leute,
war nen bisschen länger nicht mehr hier.
Aber nachdem sich die Fragen zur Lupe häufen wollte ich mal die Richtung angeben 😃
Allerdings auch nur konzeptionell und in Kürze:
Wir mussten ein bisschen an der class.tslib_content.php rumbasteln um das hinzukriegen, denn um es auf allen Browsern (auch IE #angry# ) anzeigen zu können müssen ein paar Angaben in die DIVs rein, die mit TypoScript so nicht wirklich klappen (zumindest hab ich das nicht geschafft).
Also schaut mal in den Quelltext von unicef.de und schaut euch mal das div-Konstrukt an. Gebaut wird das in der Funktion imageLinkWrap der obigen Klasse.
Folgendes haben wir z.B darin gemacht:
/*$a1='<a href="#" class="popuplink" onclick="'.
htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').
'" globals="" tsfe-="">ATagParams.'>';
$a2='</a>'.'';*/
$ig_weite = $ausmasse[0]+4;
$a1='<div class="imgpopup" style="width:'.$ig_weite.'px"><a href="#" onclick="'.
htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').
'" globals="" tsfe-="">ATagParams.'>';
$a2='</a>
<a href="#" class="lupe" onclick="'.htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').'" globals="" tsfe-="">ATagParams.'>
<span>Bild vergrößern</span>
</a></div>';
Die ersten vier Zeilen ist der alte Kram. Darunter kommt unser Ersatz.
Wichtig ist die Integration der Breite des Bildes plus Rahmen in den Inline-Style des divs!
Die Breite wird in der Funktion cImage ausgelesen und per $ausmasse an ImageLinkWrap übergeben:
function cImage($file,$conf) {
$info = $this->getImgResource($file,$conf['file.']);
$GLOBALS['TSFE']->lastImageInfo=$info;
if (is_array($info)) {
$info[3] = t3lib_div::png_to_gif_by_imagemagick($info[3]);
$GLOBALS['TSFE']->imagesOnPage[]=$info[3]; // This array is used to collect the image-refs on the page...
if (!strlen($conf['altText']) && !is_array($conf['altText.'])) { // Backwards compatible:
$conf['altText'] = $conf['alttext'];
$conf['altText.'] = $conf['alttext.'];
}
$altParam = $this->getAltParam($conf);
$theValue = '<img src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" width="'.$info[0].'" height="'.$info[1].'" border="'.intval($conf['border']).'"'.($conf['params']?' '.$conf['params']:'').($altParam).' />';
$theValue2 = '<img class="popup" src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" width="'.$info[0].'" height="'.$info[1].'" border="'.intval($conf['border']).'"'.($conf['params']?' '.$conf['params']:'').($altParam).' />';
$ausmasse = array($info[0],$info[1]);
if ($conf['linkWrap']) {
$theValue = $this->linkWrap($theValue,$conf['linkWrap']);
} elseif ($conf['imageLinkWrap']) {
$theValue = $this->imageLinkWrap($theValue,$info['origFile'],$conf['imageLinkWrap.'], $theValue2, $ausmasse);
}
return $this->wrap($theValue,$conf['wrap']);
}
}
Das, und das schon gepostete CSS müssten in die richtige Richtung führen.
Sorry, habe aber leider nicht mehr Zeit das alles StepByStep zu erklären.
Vielleicht später mal.
Gruss und viel Glück :p
Julian