Community Forum
Lytebox Anleitung, Inkl. Slideshow & wesentlich kleiner als Lightbox 2
Das Skript und Details dazu gibt es hier: LinkIch habe dies wie folgt im Shop eingebunden:
Datei /includes/header.php im HEAD-Bereich folgendes einbinden:
QUELLTEXT
<!-- LYTEBOX START -->
<script type="text/javascript" language="javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/lytebox.js'; ?>"></script>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/lytebox.css'; ?>" type="text/css" media="screen" />
<!-- LYTEBOX END -->
<script type="text/javascript" language="javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/lytebox.js'; ?>"></script>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/lytebox.css'; ?>" type="text/css" media="screen" />
<!-- LYTEBOX END -->
Datei /includes/modules/product_info.php
-> folgende Zeile suchen:
QUELLTEXT
$info_smarty->assign('PRODUCTS_IMAGE', $image);
und darunter folgendes einfügen:
QUELLTEXT
// LYTEBOX START
$lyteBoxImage = $product->data['products_image'];
$info_smarty->assign('PRODUCTS_LYTEBOX_IMAGE', $lyteBoxImage);
// LYTEBOX END
$lyteBoxImage = $product->data['products_image'];
$info_smarty->assign('PRODUCTS_LYTEBOX_IMAGE', $lyteBoxImage);
// LYTEBOX END
-> weiter suchen nach:
QUELLTEXT
$info_smarty->assign('PRODUCTS_POPUP_LINK_'.$img['image_nr'],
'java script:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE,
'pID='.$product->data['products_id'].$connector.'imgID='.$img['image_nr']).'\')');
und darunter folgendes einfügen:
QUELLTEXT
// LYTEBOX START
$mo_lytebox_img = $img['image_name'];
$info_smarty->assign('PRODUCTS_LYTEBOX_IMAGE_'.$img['image_nr'], $mo_lytebox_img);
// // LYTEBOX END
$mo_lytebox_img = $img['image_name'];
$info_smarty->assign('PRODUCTS_LYTEBOX_IMAGE_'.$img['image_nr'], $mo_lytebox_img);
// // LYTEBOX END
Datei /templates/DEIN_TEMPLATE/module/product_info/product_info_v1.html
-> dort rufe ich das das Produktbild wie folgt auf:
QUELLTEXT
<a
href="images/product_images/popup_images/{$PRODUCTS_LYTEBOX_IMAGE}"
rel="lyteshow[{$PRODUCTS_ID}]" title="{$PRODUCTS_NAME}"><img
src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}"
class="productImageBorder" title="{$PRODUCTS_NAME}" border="0"
/></a>
-> weitere Produktbilder wie folgt (hier das 2. Bild):
QUELLTEXT
if $PRODUCTS_IMAGE_1 != ''}
<a href="images/product_images/popup_images/{$PRODUCTS_LYTEBOX_IMAGE_1}" rel="lyteshow[{$PRODUCTS_ID}]" title="{$PRODUCTS_NAME}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" class="productImageBorder" title="Klicken für Detailbild!" border="0" /></a>
{/if}
<a href="images/product_images/popup_images/{$PRODUCTS_LYTEBOX_IMAGE_1}" rel="lyteshow[{$PRODUCTS_ID}]" title="{$PRODUCTS_NAME}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" class="productImageBorder" title="Klicken für Detailbild!" border="0" /></a>
{/if}
->für jedes weitere Bild oben genannten Code jedoch weiter durchnummeriert... (anstelle _1 dann _2 ...)
Datei lytebox.css muss noch wie folgt editiert werden:
QUELLTEXT
images/
ersetzen mit
QUELLTEXT
img/lytebox/
lytebox.css kopieren unter /template/Dein_Template/
lytebox.js kopieren unter /template/Dein_Template/javascript/
Ordner images umbenennen in lytebox und kopieren nach /template/Dein_Template/img/
Hoffe ich habe nichts vergessen
