Shopsystem ShopPilot

ShopPilot => ShopPilot Enterprise => Thema gestartet von: dobra am Juni 26, 2011, 12:46:36

Titel: Slideshow mit jQuery
Beitrag von: dobra am Juni 26, 2011, 12:46:36

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 (http://www.shoppilot.at/demo-cgi-bin/demo_carshop/iboshop.cgi?show0) 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

Code: [Auswählen]

<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 (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider)