Einbinden des Nivo-Sliders auf der Startseite

Aus Wiki | xtcModified eCommerce Shopsoftware

Einbau des Nivo Sliders auf der Startseite

Es gibt ja schon ein gutes Slider-Modul von hetfield, allerdings ist das sehr Komplex, da die Verwaltung danach auch im Shop-Admin funktionieren soll. Wer einfach nur einen Slider auf der Startseite möchte, der obendrein noch tolle Effekte bietet, der kann sich den Nivo-Slider ja mal anschauen.

Vor dem verändern von Dateien immer ein Backup anlegen!!!

Zuerst laden wir den Nivo Slider herunter [1] Dort gibt es natürlich auch die Demo zu bestaunen.

Entpacke die heruntergeladene ZIP-Datei

Lade die Datei jquery.nivo.slider.js in das Verzeichnis /templates/DeinTemplate/javascript/ hoch.

Lade aus dem ZIP-Archiv die Beispiel-Dateien aus /nivo-slider/demo/images nach /templates/DeinTemplate/img/ hoch.

Öffne die Datei /templates/DeinTemplate/javascript/general.js.php mit einem Editor deiner Wahl. (nicht der Standard Windows Editor! z.B. gEDIT, Phase5 usw...)

Füge in Zeile 19 nach

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

folgende Zeilen ein:

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:10, //Anzahl der Slices beim Slice Effekt
        animSpeed:650, //Slide transition speed
        pauseTime:6000, //Angabe in Milisekunden
        startSlide:0, //Set starting Slide (0 index)
        directionNav:false, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:false, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});
</script>

Jetzt öffnen wir die Stylesheet-Datei /templates/DeinTemplate/stylesheet.css

Kopiere diese Stylesheet-Angaben in deine XTC-Modified stylesheet.css. Ich habe die Angaben ans Ende der stylesheet.css gepackt.

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
 
/* Hier gibst du an, wie groß dein Slider werden soll. Außerdem wird eine Ladeanimation eingebunden*/
 
#slider{
        height: 250px; /* Make sure your images are the same size */
        width: 760px; /* Make sure your images are the same size */ 
	background:url(img/loading.gif) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}
/* Die Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	position:absolute;
	left:360px;
	bottom:-18px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(img/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
/*=================Ende-Nivo-Slider===================*/

Jetzt öffnen wir die Datei /templates/DeinTemplate/index.html

Dort fügen wir an gewünschter Position folgendes ein:

{if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
         <div id="slider" class="nivoSlider">
                <img src="{$tpl_path}img/slider1.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider2.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider3.jpg" alt="Dein Alt-Text" />
                <img src="{$tpl_path}img/slider4.jpg" alt="Dein Alt-Text"  />
                <img src="{$tpl_path}img/slider5.jpg" alt="Dein Alt-Text"  />
            </div>
   {/if}
{/if}

Zur Erklärung: Der PHP-Code dient dazu, den Slider NUR auf der Hauptseite index.php anzuzeigen. Siehe auch hier: [[2]] Der Div-Container wird wie im stylesheet mit id="slider" benannt. Dazu muss noch die Class "nivoSlider" hinzugefügt werden, um die Styles für die Effekte zu aktivieren.

Innerhalb dieses Containers verlinken wir die gewünschten Bilder. Dazu nehmen wir die Variable

{$tpl_path}

Damit wir auch den gewünschten Ordner in unserem Template ansprechen.

Jetzt kommt der Ordner, in dem die Bilder gespeichert sind. In meinem Fall ist es der Ordner /img/ im Templateverzeichnis.

Jetzt werden die bearbeiten Dateien wieder hochgeladen und die vorhandenen Files überschrieben.

Jetzt solltet ihr auf eurer Startseite den gewünschten Slider haben.

Selbstverständlich können die Stylesheet-Angaben nach den eigenen Wünschen angepasst werden. In dem ZIP-Archiv des Nivo Sliders gibt es eine Demo.html und die dazu gehörige style.css. Dort könnt ihr Beispiele finden und ausprobieren.

Gleiches gilt für die Angaben in der general.js.php. Auch dort können z.B. Geschwindigkeit, Effekte, usw. angepasst werden. Natürlich können die Beispielbilder in /img/ wieder entfernt werden. Sie dienen nur dem ersten Test, ob alles funktioniert.

Die Dateinamen slider1.jpg, slider2.jpg, etc. müssen bei Verwendung obiger Beispieldateien angepasst werden. Das obige Layout ist für das xtcModified-Layout zu gross. Achtet besonders darauf, dass die Bilder in der gewünschten Größe auf den Server geladen werden, da die Bilder für die Bildershow nicht skaliert werden können.

Support für den Slider gibt es unter [3]

Ich hoffe es ist für den ein oder anderen nützlich.

Gruß Sick

Automatisches laden der Sliderbilder aus einem Verzeichnis

Statt dem oben genannten Änderungen in der /templates/DeinTemplate/index.html folgende verwenden:

{*Startseiten Slideshow*}
<div id="slider">
{php}
 $path=$this->get_template_vars('tpl_path').'img/slider/'.$this->get_template_vars('language').'/';
 $handle = opendir ($path);
 while ($file = readdir ($handle)) {
 if(substr($file,-4)=='jpeg'||substr($file,-3)=='jpg'||substr($file,-3)=='png'){
         echo '<img src="'.$path.$file.'" alt="" />';
     }
 }
 closedir($handle);
 {/php}
 </div>
{*Startseiten Slideshow*}