Hier jetzt mal die kleine Anleitung.
Das Ganze ist jetzt auch kompatibel mit einem Nivo-Startseiten-Slider und bietet die Möglichkeit auch die neusten Produkte oder Startseiten-Produkte darzustellen.
[ Für Gäste sind keine Dateianhänge sichtbar ]
Hier sieht man jetzt zwar nicht die schicken überblende Effekte, daher schnell einbauen und testen.
boxes.php include(DIR_WS_BOXES . 'manufacturers.php');
füge danach ein:
include(DIR_WS_BOXES . 'slider.php');
general.js.php<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>
füge danach ein:
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#box-slider').nivoSlider({directionNav:false,controlNav:false,keyboardNav: false});
});
</script>
index.html{$box_SLIDER}
stylesheet.css am Ende einfügen:
/* SLIDER-BOX */
#box-slider { position:relative; left: 0; display:block;overflow:hidden;max-height:180px;}
#box-slider a.nivo-imageLink { position:absolute; top:0px; left:0px; border:0; padding:0; margin:0; z-index:6; display:none; }
#box-slider img { position:relative; top:0px; left:0px;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#ccc;color:#000;opacity:0.8;width:100%;z-index:8;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
Einstellungen - slider.php $box_mode = 'bestsellers'; //new, bestsellers, top
$max_slider_products = 4;
Die Produktbilder sollten die passende Größe für die Boxen haben und wenn möglich die gleiche Größe.
In der box_slider.html kann hierfür ein bisschen nachgeholfen werden, bis die Größe stimmt.
{$box_data.PRODUCTS_IMAGE|replace:'thumbnail':'info'} und/oder width="180"
Im Anhang befinden sich die restlichen Dateien, welche direkt so ins Template eingefügt werden können.
"box_slider.html", "slider.php", "jquery.nivo.slider.pack.js"
Viel Erfolg
h-h-h
[
EDIT Tomcraft 18.01.2012: Code korrigiert, danke an werresal für den
Hinweis.]
[
EDIT Tomcraft 20.01.2012: Hier geht es
zur überarbeiteten Anleitung von werresal.]