Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Fade-in Slideshow (Javascript)

Anbieterseite mit Demo, Code, JS-Datei und Beschreibung

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Tipp: Evtl. mit Google-Sprachtools übersetzen, falls Englischkenntnisse fehlen.

Benötigte Teile:

A) Beispielcode
(für 1 Galerie - ohne Designelemente, nur das Grundgerüst - getestet)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine Galerieseite</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
        ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
        ["http://i30.tinypic.com/531q3n.jpg"],
        ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--kein Komma nach dem letzten Bildelement!
    ],
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})

</script>

</head>

<body>

<div id="fadeshow1"></div>

</body>
</html>

Anmerkungen: Die rotmarkierten Teile können, sollten bzw. müssen angepasst werden, siehe "Hinweise" unten. Für eine Navigation unterhalb der Galerie unter Punkt 4)d) nachlesen.

B) Diese Datei >> http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js muss auch auf den Webspace hochgeladen werden.

Anmerkungen: Die Datei (siehe Link oben bei Punkt B)) downloaden (Link mit rechter Maustaste anklicken und "Ziel speichern unter..." auswählen) und in das Verzeichnis auf dem Webspace hochladen, in dem auch die Galerieseite liegt. Bei einem anderen Verzeichnis müsste die Adresse bei src="fadeslideshow.js" im Beispielcode unter Punkt A) angepasst werden.

Hinweise:

1) Diesen beiden Angaben (rot markiert) müssen gleich sein

wrapperid: "fadeshow1",

<div id="fadeshow1"></div>

damit Javascript die Bilder der Galerie ins richtige DIV (das leer sein sollte) setzen kann.

2) Hier die max. Grösse der Galerie angeben


dimensions: [250, 180],

diese sollte mindestens so gross sein wie das grösste Bild der Galerie.

3) In diesen Abschnitten

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
...
...

werden jeweils durch Kommas getrennt innerhalb der eckigen Klammern folgende Angaben gemacht

1.Stelle Bildadresse, z.B. "http://i26.tinypic.com/11l7ls0.jpg"
2.Stelle (optional, wenn nicht gebraucht, dann "" angeben) Linkadresse, z.B. "http://en.wikipedia.org/wiki/Cave"
3.Stelle (optional, wenn nicht gebraucht, dann "" angeben) Linkziel (target),z.B. "_new" = neues Browserfenster
4.Stelle (optional, wenn nicht gebraucht, dann "" angeben) Text innerhalb des Bildes, z.B. "Some day I'd like to explore these caves!"

Bitte unbedingt beachten: Den letzten Abschnitt ohne Komma am Ende!

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<-- hier kein Komma beim letzten Bildelement!

4) Die übrigen Einstellungen bei Bedarf anpassen

a) displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false randomize:true} (Beispiel)

type:'auto' = Ablauf automatisch
type:'manual' = manuelles Blättern

pause:2500 = Pause zwischen den Bilder in Millisekunden ( 2500 = 2,5 Sekunden)

cycles:0 = automatischer Ablauf unendlich (wenn 0 (Null) angegeben wird)
cycles:3 = automatischer Ablauf endet nach 3 Durchgängen der Bilder
cycles:7 = automatischer Ablauf endet nach 7 Durchgängen der Bilder

randomize:true = bei true werden die Bilder zufällig gemischt

b) fadeduration: 500 = Dauer des Fade-Effekt beim Übergang von einem Bild zum nächsten, in Millisekunden.

c) descreveal: "ondemand" = Für eine Diashow, in denen mindestens ein Bild hat eine Beschreibung hat.
Auswahlmöglichkeit:
"ondemand" = Beschreibung wird angezeigt, wenn das Bild mit der Maus überfahren wird (Mouseover)
"always" = Beschreibung wird immer angezeigt, wenn vorhanden

d) togglerid: "" = wenn Navigationsbuttons unterhalb der Diashow genutzt werden sollen, dann hier einen Namen (id) angeben, z.B.

togglerid: "slideshowtoggler"

und unter dem leeren DIV für die Bildergalerie ein weiteres DIV mit den Navigationsbutton einfügen, z.B. (Code von Anbieterseite)


<div id="fadeshowtoggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

Anmerkung: Name (z.B. slideshowtoggler) bei togglerid: "...", z.B. togglerid: "slideshowtoggler" und bei der DIV-id, z.B. div id="fadeshowtoggler" muss gleich sein, damit beide einander zugeordnet werden können.

Hinweis: Weitere Infos - in englisch - auf der Anbieterseite (siehe Link oben).

5) Sollen 2 oder mehr Galerien auf die Seite (wie auf der Anbieterseite), dann diese Abschnitte kopieren, darunter wieder einfügen und anpassen

a) Headbereich <head>...</head>

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
        ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
        ["http://i30.tinypic.com/531q3n.jpg"],
        ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--kein Komma nach dem letzten Bildelement!
    ],
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})

b) Bodybereich <body>...</body>

<div id="fadeshow1"></div>

Anmerkung: Die Angaben bei 
wrapperid: "..." und div id="..." müssen jeweils gleich, aber von Galerie- zu Galerie-Abschnitt unterschiedlich sein.

Anleitung (C) 2009 Daniel Wurst - http://www.homepage-faqs.de