Autor Thema: Slideshow mit jQuery  (Gelesen 3359 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline dobra

  • Global Moderator
  • Hero Member
  • *****
  • Beiträge: 1337
  • Lob: 18
    • ShopPilot AT
Slideshow mit jQuery
« 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 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

Linkback: http://www.shoppilot.net/pf/shoppilot-enterprise/2/slideshow-mit-jquery/1536/
mfG
dobra
______________________________
Betreute Shops:
Barrique Einzelhandel
Barrique Großhandel


xx
Nutzung von tabs aus jquery-ui (Bug in jquery-ui widget with base-tag)

Begonnen von admin

0 Antworten
2410 Aufrufe
Letzter Beitrag Oktober 25, 2013, 12:15:12
von admin
xx
Kriteriensuche funktioniert nicht mit neuen jquery-Scripts

Begonnen von dobra

0 Antworten
2106 Aufrufe
Letzter Beitrag März 22, 2015, 11:07:14
von dobra