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