Installationsanleitung für NIVO Slider für modified eCommerce Shopsoftware, basierend auf der
Anleitung von h-h-h und Codeschnipsel.
Alle Dateien im Archiv entsprechend der Verzeichnisstruktur hochladen.
####Anleitung start
SUCHE in "/templates/DEIN TEMPLATE/source/boxes.php" nach:
include(DIR_WS_BOXES . 'manufacturers.php');
FÜGE DANACH ein:
include(DIR_WS_BOXES . 'slider.php');
---
SUCHE in "/templates/DEIN TEMPLATE/javascript/general.js.php" nach:
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>
FÜGE DANACH ein:
/* SLIDER-BOX */
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#box-slider').nivoSlider({
directionNav:false,
controlNav:false,
randomStart:true,
keyboardNav:false,
effect:'sliceUp',
pauseTime:5000,
pauseOnHover: true
});
});
</script>
/* SLIDER-BOX ENDE*/
---
FÜGE an gewünschter Stelle in "/templates/DEIN TEMPLATE/index.html" ein:
{$box_SLIDER}
---
FÜGE am Ende der Datei in "/templates/DEIN TEMPLATE/stylesheet.css" ein:
/* SLIDER-BOX */
#box-slider { position:relative; left: 0; display:block;overflow:hidden;max-height:200px;}
#box-slider a.nivo-imageLink { position:absolute; top:0px; left:0px; border:0; padding:0; margin:0; z-index:99; display:none; width:200px; height:200px; }
#box-slider img { position:relative; top:0px; left:0px;}
.newest_slider { height:230px; margin-bottom:15px; background-image:url(HIER DEIN LADEBILD EINFÜGEN); }
.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 !important;width:100%;z-index:8;}
.nivo-caption p {padding:5px;margin:0;font-size:11px;line-height:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* SLIDER-BOX ENDE */
---
Einstellungmöglichkeiten:
slider.php - Anzahl der Produkte im Slider:
$max_slider_products = 30;
stylesheet.css - Ladebild (kommt immer als erstes, dann erstes Bild der slideshow)
.newest_slider { height:230px; margin-bottom:15px; background-image:url(HIER DEIN LADEBILD EINFÜGEN); }
general.js.php -
jQuery Plugin Usage | Nivo Sliderbox_slider.html - Features/div. Einstellungen bedingt durch eigenes Design:
- Produktname auf 35 Zeichen begrenzt, dann Zeilenumbruch dann
- Preisanzeige in Fettschrift
- erstes Sliderbild (war 1 Bild aus dem sliderkatalog) ersetzt durch feste Definition (siehe stylesheet.css)
Weiterführende Informationen:
Ich habe das Teil an meine Bedürfnisse angepasst, inwieweit Anzeige von Bestellers usw möglich ist habe ich nicht getestet. Falls Du diese Funktion haben willst (dieser script zeigt nur Neue Produkte) musste Du folgendes ändern:
"box_slider.html":
<h2 class="boxheader">{#heading_whatsnew#}</h2>
in {#heading_bestsellers#} etc.
"slider.php":
$box_mode = 'bestsellers';
in new, bestsellers, top etc. Scheinbar aber keine Funktion.
So, ich hoffe ich habe nichts vergessen. Viel Spaß beim Einbau !
Grüße
[
EDIT Tomcraft 20.01.2012: Anleitung in
Beitrag 1 verlinkt.]