Tutorials von Thomas Frei-Herrmann

Slider horizontal mit Lytebox - Tutorial



zum Beispiel dieses Sliders


Zunächst einmal vielen Dank an “Strunz”, der diesen Slider hier vorgestellt hat.


Bitte ladet Euch diese Javascript-Datei (und 2 Ordner) herunter, die Ihr für die Konfiguration dieses Skriptes benötigen werdet und in die Ihr Eure Fotos einbaut.

Download Foto “2011-04-19-slider-horizontal.zip”. Downloads insgesamt seit dem 19.04.2011: 322




... entpackt diese .zip-Datei und Ihr erhaltet einen Ordner: slider

... in diesem Ordner (“slider”) werdet Ihr die Datei:

slider-horizontal.js (bitte diese Datei mit Eurem Windows-Editor öffnen und bearbeiten)

und 2 Ordner:

images (Ordner für Eure großen Fotos, die sich in der “Lytebox” öffnen werden)
thumbs
(Ordner für die kleinen Piktogramme für den Slider)

vorfinden. In den Ordnern habe ich, zum besseren Verständnis, meine Bilder (images) und Piktogramme (thumbs) mal drinnen gelassen, die Ihr später natürlich noch löschen müsst.

... im oberen Bereich der Datei “slider-horizontal.js” fügt Ihr Eure Fotos ein. Ich habe dort auch noch die Angaben zu meinen Fotos, zum besseren Verständnis, drin stehen gelassen und das sieht dann so aus:

//<![CDATA[
tNews.push('<a href="./slider/images/eichhrnchen.jpg" rel="lytebox" title="Eichhörnchen"><img src="./slider/thumbs/eichhrnchen.jpg" /></a>');
tNews.push('<a href="./slider/images/hibsikusgelb.jpg" rel="lytebox" title="Hibiskus Gelb"><img src="./slider/thumbs/hibiskusgelb.jpg" /></a>');
tNews.push('<a href="./slider/images/hibiskusrot.jpg" rel="lytebox" title="Hibiskus Rot"><img src="./slider/thumbs/hibiskusrot.jpg" /></a>');
tNews.push('<a href="./slider/images/klatschmohn.jpg" rel="lytebox" title="Klatschmohn"><img src="./slider/thumbs/klatschmohn.jpg" /></a>');
tNews.push('<a href="./slider/images/margerite.jpg" rel="lytebox" title="Margerite"><img src="./slider/thumbs/margerite.jpg" /></a>');
tNews.push('<a href="./slider/images/peonie.jpg" rel="lytebox" title="Peonie"><img src="./slider/thumbs/peonie.jpg" /></a>');
tNews.push('<a href="./html/tutorial.php" title="zu meinem Tutorial"><img src="./slider/thumbs/sonnenhut.jpg" /></a>');
tNews.push('<a href="./html/tulpen.html" rel="lyteframe" title="Lyteframe Beschreibung Tulpe" rev="width: 500px; height: 300px; scrolling: auto;"><img src="./slider/thumbs/tulpe.jpg" /></a>');
//]]>

... Ihr müsst also oben meine Foto-Namen noch mit Euren großen und kleinen Foto-Namen ersetzen, die Ihr vorher in diese Ordner kopiert. Ihr könnt beliebig viele Fotos angeben oder entfernen.

Bemerkung: Ich habe hier beim Bild “Sonnenhut” mal einen direkten Link eingefügt und beim Bild “Tulpe” noch einen “Lyteframe” mit Text als Alternative eingebaut.

Weiterhin könnt Ihr in dieser Datei auch noch andere Einstellungen vornehmen, wie z.B. die Breite und die Höhe des Sliders in Pixeln.

//°°°°°°°°°°Delimiter zwischen den einzelnen News
tDelimiter  ='';

//°°°°°°°°°°Interval in ms
tInterval   =20;

//°°°°°°°°°°Stop bei mouseover?true:false
tStop       =true;

//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
tRepeat     =2;

//°°°°°°°°°°Rahmen
tBorder     ='0px';

//°°°°°°°°°°Breite
tWidth      =868;

//°°°°°°°°°°Höhe
tHeight     =120;

//Abstand Rahmen->Inhalt (top+bottom)
tPadding    =0;

... wenn Ihr mit diesen Vorarbeiten fertig seid, dann kopiert bitte den gesamten Ordner

slider

in den Ordner “Lokale Publizierung” auf Eurem PC (um es auch schon lokal testen zu können) und entsprechend natürlich auch mit Eurem FTP-Programm in das Stammverzeichnis auf Euren Server, also dort, wo sich auch die Startseite “index.html” befindet.

Nun müsst Ihr noch im “Head-Bereich” Eurer Seite auf die Lytebox-Skripte verweisen. Ich gehe jetzt davon aus, dass Ihr Euch bereits mit der “Lytebox” beschäftigt habt, sonst guckt bitte hier.

... und noch eine CSS-Anweisung <style> hier mit einbringen, in der Ihr auch wieder die Breite und die Höhe des Sliders einstellt und z.B. angeben könnt, ob Ihr einen Rahmen (border) haben wollt, welche Hintergrundfarbe (background-color) und den Abstand (padding) zwischen den Fotos.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

Achtet bitte dabei auf die relative Pfadangabe zu den Skripten der “Lytebox”. Hier ein Punkt ./ da ich das auf meiner Startseite eingebaut habe. Von einer Unterseite, die sich im Ordner “HTML” befindet, müssten dort 2 Punkte ../ stehen (gehe einen Ordner höher).

<script type="text/javascript" language="javascript" src="./lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="./lyteboxscripts/lytebox.css" type="text/css" media="screen">


<style type="text/css">
a img {border: 0;}

#slider {
width: 868px;
height: 120px;
border: 1px solid #657593;
background-color: #E4E4E4;
padding: 10px;
}
</style>

... jetzt fehlt nur noch der Verweis als DIV-Container in Eurem Layout-Bereich. Dazu zieht Ihr Euch ein Textfeld auf und fügt diesen Verweis in die HTML des Textfeldes ein.

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Text” klicken
> und anschließend auf den Button “HTML” und das Skript unten einfügen.

Bitte achtet auch hier wieder, wie oben beschrieben, auf die richtige relative Pfadangabe, ein oder zwei Punkte zum Ordner “slider”, den Ihr ja bereits in das richtige Verzeichnis kopiert habt.

<div id="slider">
   <script type="text/javascript" src="./slider/slider-horizontal.js"></script>   
</div>

Viel Erfolg !

nach oben

diese Seite weiter empfehlen



Counter Statistik