Hallo,
nachdem ich ein paar Anfragen deswegen bekommen habe, hier mal ein
einfaches Beispiel, wie man - z.B. auf der Startseite - wechselnde Bilder (Slideshow) im Shop integrieren kann.
Beispiel wie das ausschauen könnte im carshop eingebaut
Die Bilder und Links sind hier fix eingetragen = keine DB-Abfragen etc. nötig)
Einbauanleitung:
1) easyslider.zip im root des Shopprojekts entpacken
2) in der HTML-Vorlage wo der Slider angezeigt werden soll
<script type="text/javascript" src="../easyslider/js/jquery.js"></script>
<script type="text/javascript" src="../easyslider/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="../easyslider/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<div id="content">
<div id="slider">
<ul>
<li><a href="__xxpath__?show310,__xxsession__"><img src="http://www.shoppilot.at/AT-ShopPilot/images/other/Bilder/start-01-2011.jpg" alt="Test 1" /></a></li>
<li><a href="__xxpath__?show280,__xxsession__"><img src="http://www.shoppilot.at/AT-ShopPilot/images/other/Bilder/banner-konfigurator1.jpg" alt="Test 2" /></a></li>
<li><a href="__xxpath__?show100,__xxsession__"><img src="http://www.shoppilot.at/AT-ShopPilot/images/other/Bilder/banner-repo1.jpg" alt="Test 3" /></a></li>
</ul>
</div>
</div>
3) Die Links und absoluten Pfade zu den Bildern anpassen
(es können hier beliebig viele Bilder (<li>..</li>) eingetragen werden)
4) alle Dateien im easyslider-Ordner in die "zusätzliche Dateien" Liste hinzufügen
5) Shop veröffentlichen
P.S.: wenn jemand selber basteln möchte - das Original-Script und auch eine Anleitung zum anpassen gibt es hier
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
Autor
