Slideshow im Header
Verfasst: 02.06.2010 23:18
Hallo,
im Header des Prosilver Styles hätte ich gerne eine Slideshow. Nun habe ich einige Zeit damit verbracht eine Anleitung dazu zu finden, was mir leider nicht gelang. Dabei stieß ich auch auf die Anleitung, womit zufällig verschiedene Bilder im Header angezeigt werden, wenn die Seite neu geladen wird. Ich bin allerdings auf der Suche nach einer Anleitung, wodurch die Bilder im Header auch ohne neu laden wechseln.
Dabei stieß ich auf das cycle plugin und versuchte es mit großem Selbstvertrauen einzubauen, was mir natürlich nicht gelang, denn sonst würde ich hier nicht schreiben.
Wie folgt ging ich vor.
In der overall_header fügte ich im <head> Bereich ein.
Den Logocodeersetzte ich durch.
In die common.css fügte ichein.
Die beiden .js Dateien ludt ich natürlich auch in den Template Ordner und alles was es zu entleeren gibt, habe ich zigfach geleert inklusive Browsercache.
Doch das Ergebnis ist lediglich, dass die beiden Bilder im Header-Bereich links nebeneinander angezeigt werden, anstatt dass sie wechseln. Meine Frage wäre nun, ob jemand eine Idee hat weshalb es nicht funktioniert? Ersatzweise wäre ich auch dankbar, wenn jemand weiß, wo ich bereits eine fertige Anleitung dazu finde, denn ich befinde mich im Niemandsland, da ich vom Programmieren überhaupt keine Ahnung habe.
im Header des Prosilver Styles hätte ich gerne eine Slideshow. Nun habe ich einige Zeit damit verbracht eine Anleitung dazu zu finden, was mir leider nicht gelang. Dabei stieß ich auch auf die Anleitung, womit zufällig verschiedene Bilder im Header angezeigt werden, wenn die Seite neu geladen wird. Ich bin allerdings auf der Suche nach einer Anleitung, wodurch die Bilder im Header auch ohne neu laden wechseln.
Dabei stieß ich auf das cycle plugin und versuchte es mit großem Selbstvertrauen einzubauen, was mir natürlich nicht gelang, denn sonst würde ich hier nicht schreiben.
Wie folgt ging ich vor.
In der overall_header fügte ich im <head> Bereich
Code: Alles auswählen
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery_1_4_2.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery_cycle_lite_min.js"></script>
<script type="text/javascript">
$(function(){
$('#slideshow').cycle('fade');
});
</script>Den Logocode
Code: Alles auswählen
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>Code: Alles auswählen
<div id="slideshow">
<img src="{T_IMAGESET_PATH}/site-logo-1.png" alt="01" width="324" height="150" />
<img src="{T_IMAGESET_PATH}/site-logo-2.png" alt="02" width="324" height="150" />
</div>In die common.css fügte ich
Code: Alles auswählen
#slideshow {
margin: 0px auto;
width: auto;
height: auto;
}Die beiden .js Dateien ludt ich natürlich auch in den Template Ordner und alles was es zu entleeren gibt, habe ich zigfach geleert inklusive Browsercache.
Doch das Ergebnis ist lediglich, dass die beiden Bilder im Header-Bereich links nebeneinander angezeigt werden, anstatt dass sie wechseln. Meine Frage wäre nun, ob jemand eine Idee hat weshalb es nicht funktioniert? Ersatzweise wäre ich auch dankbar, wenn jemand weiß, wo ich bereits eine fertige Anleitung dazu finde, denn ich befinde mich im Niemandsland, da ich vom Programmieren überhaupt keine Ahnung habe.