Slideshow im Header bzw. Content für xt:Commerce

Ich lese im xt:Commerce-Forum immer wieder die Frage nach einer Slideshow (ein- und ausfadende Bilder), speziell im Header oder Content auf der Startseite.

Ich muss zugeben, dass ich diese Javascript Effekt sehr schätze, erst recht seit ich den Javascriptframework jquery kenne.

Also hier ein kleiner Guide, welchen ich vermutlich in zwei Teile Splitten werde:
Zum einen das rohe erstellen der Slideshow, zum anderen das automatische auslesen und ordnen der Bilder aus einem Verzeichnis auf dem Server (comming soon… )

Live Demo

http://shop.8works.de/
Für einen weiteren Link zu einem Shop, welcher eine Slideshow im Header benutzt währe ich sehr dankbar.

Slideshow Scripte

Zunächst benötigen wir Jquery und das cycle-Plugin, diese laden wir in das Hauptverzeichnis des Onlineshops.

Nun binden wir die Dateien in den Shop ein, dass geschieht in der includes/header.php
Suchen Sie das </head>-Tag und fügen Sie davor diesen Quellcode ein:

<!-- header slide -->
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='jquery.cycle.min.js'></script>
<script type='text/javascript' src='header-slide.js'></script>
<!-- header slide -->

Wie Sie sehen haben wir gleich eine dritte Datei mit eingebunden, header-slide.js, also erstellen Sie im Hauptverzeichnis von xt:Commerce diese Datei und schreiben folgenden Code in sie:

$j=jQuery.noConflict();
// noConflict mode => falls Lightbox bzw. andere JS-Frameworks bereits genutzt werden.
 
$j(document).ready(function(){
$j('#stage').cycle({
fx: 'fade',  
speed: 1200,  
pause: 0, 
timeout: 3300 
}); 
});

In diesen Zeilen wird das Cycle-Plugin konfiguriert, es bietet noch einige weitere Einstellungen, ein komplette Liste diese gibt es auf der Internetseite des Programmierers(link).

Bilder uploaden & Header austauschen

Nun müssen noch die Bilder auf den Server geladen und in das xt:Commerce Template eingebunden werden.
Also erstellen Sie im Templateordner einen Ordner SHOP/templates/IHR_TEMPLATE mit dem Namen slide_header und uploaden Sie die Bilder in diesen.
Öffnen Sie anschließend die index.html und lokalisieren Sie die Stelle an welcher die Bilder erscheinen sollen und fügen Sie diesen Quelltext ein:

<div id="stage" style=“height: 129px;width: 960px;position:absolute;overflow:hidden“>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/A.gif" alt="{$store_name}" id="img_1" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/B.gif" alt="{$store_name}" id="img_2" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/C.gif" alt="{$store_name}" id="img_3" class="header_img" />
</a>
<a href="/" title="{$store_name}">
<img src="{$tpl_path}slide_header/D.gif" alt="{$store_name}" id="img_4" class="header_img" />
</a>
</div>

Diesen Quelltext müssen Sie ggf. anpassen, da die Bilder im Beispiel die Namen A.gif, B.gif, C.gif und D.gif haben.
Außerdem sollten Sie die Größe des Slidebereichs anpassen(Zeile 1).

Wenn alles gut gegangen ist hat Ihr xt:Commerce Shop nur eine Slideshow im Header, natürlich könnte man es auch auf der Startseite im Contentbereich oder auch in ganzen Boxen nutzen.

Wie beim ersten lesen des Guides jedem klar geworden seinen sollte, werden ein Wenig HTML und CSS Kenntnisse beötigt, also zuvor ein Backup erstellen.

Demobilder Download

UPDATE: xt:Commerce Slideshow Part2 hier