es gibt hier in den Tiefen des Boards zwar bereits eine Anleitung, wie man ein Lightbox-Skript in den Randshop bringt, aber weder ist jenes Skript in qualitativer Hinsicht zu empfehlen, noch passt die Anleitung zur aktuellen 1.6. Daher hier ein Tutorial, wie man Fancybox 1.3.4 in den Shop integriert:
1. Skript herunterladen: http://www.fancybox.net
2. Die Dateien aus dem entpackten Unterordner "fancybox" auf den Server laden, am besten im Randshop-Hauptverzeichnis ebenfalls in einen Ordner "fancybox".
3. In den head-Bereich der index.tpl kommt dann als erstes folgendes:
- Code: Alles auswählen
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URLPFAD ?>fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<?php echo URLPFAD ?>fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php echo URLPFAD ?>fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo URLPFAD ?>fancybox/jquery.fancybox-1.3.4.css" media="screen" />
sowie:
- Code: Alles auswählen
<script type="text/javascript">
$(document).ready(function() {
$("a#bild").fancybox();
});
</script>
Möchte man nicht die Standarddarstellung, stehen diverse Funktionen zur Verfügung, mit denen man Fancybox variieren kann (weiterführende Infos: http://www.fancybox.net/api). Bei mir nutze ich z.B. anstelle des vorangegangenen Codes diesen:
- Code: Alles auswählen
<script type="text/javascript">
$(document).ready(function() {
$("a#bild").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'inside',
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
});
});
</script>
4. Nun muss noch das Produktbild mit Fancybox verknüpft werden. Dazu bearbeitet man im Randshop-Ordner themes/kategorie die Datei detail.php. In dieser findet man ungefähr in Zeile 238
- Code: Alles auswählen
$tpl_imagesmall_string = "<a href=\"javascript:openFenster('" . IMAGEPFAD . "dbimages/" . $ArtikelObject->bigImage . "','" . ($ArtikelObject->imagebig_width + 20). "','" . ($ArtikelObject->imagebig_height + 20) . "'); \">" . $ArtikelObject->imagesmall_imagestring . "</a>";
und ersetzt dies durch
- Code: Alles auswählen
$tpl_imagesmall_string = "<a id=\"bild\" href=\"" . IMAGEPFAD . "dbimages/" . $ArtikelObject->bigImage . " \">" . $ArtikelObject->imagesmall_imagestring . "</a>";
Abschließend muss noch der Textlink angepasst werden. Dazu eine Zeile tiefer
- Code: Alles auswählen
$tpl_imagelupe_string = "<a href=\"javascript:openFenster('" . IMAGEPFAD . "dbimages/" . $ArtikelObject->bigImage . "','" . ($ArtikelObject->imagebig_width + 20). "','" . ($ArtikelObject->imagebig_height + 20) . "');\">" . $lang_lupe . "</a>";
in
- Code: Alles auswählen
$tpl_imagelupe_string = "<a id=\"bild\" href=\"" . IMAGEPFAD . "dbimages/" . $ArtikelObject->bigImage . " \">" . $lang_lupe . "</a>";
ändern. Fertig.
Viel Spaß damit! :)
