Effektvolle Bilder

Teil 3: CSS-Trick: Slideshow mit opacity selbst erstellen

Die globale Variable xdir definiert den Wert für die linke Startposition der Vorschaubilder. Zu ihm addieren Sie den in diff übergebenen Wert. Der Scroll-Bereich lässt sich mit zwei if-Anweisungen je nach Bedarf begrenzen. Für die Scroll-Bewegung sorgt schließlich ein Timeout, mit dem sich die Funktion alle 30 Millisekunden selbst aufruft.

Vorschaubilder einblenden

Um die Slideshow so kompakt wie möglich zu gestalten, erscheinen die Vorschaubilder im Bereich des Hauptbildes. Ihre Sichtbarkeit soll von der Position des Kursors abhängen. Wird er aus dem Bild entfernt, sollen sich die Vorschaubilder ausblenden, sodass das Hauptbild komplett sichtbar ist.Damit die Bilder nicht ruckartig auftauchen und verschwinden, wird dieselbe Ein- und Ausblendtechnik eingesetzt wie bei den großen Bildern. Die Anzahl der Zwischenschritte kann man in diesem Fall durchaus verkürzen. Die folgende Funktion blendet die Vorschaubilder sowohl ein als auch aus:

Javascript-Slideshow

© Archiv

Die vorgestellte Slideshow ist äußerst kompakt und daher auch für beschränkte Platzverhältnisse bestens geeignet.
function fadeThumbs(diff) {
thOpacity += diff;
if(thOpacity <= 100 && thOpacity >=
0) {
timer2 = setTimeout(,fadeThumbs
(,+ diff + ,)', 60);
}
var obj = document.getElementById
("outer_thumbs");
obj.style.opacity = thOpacity/100;
obj.style.filter = 'Alpha(opacity=' +
thOpacity + ')';
}

Ob die Bilder gerade durchsichtig oder undurchsichtig sind, lässt sich mit dem aktuellen Wert von thOpacity ermitteln. Die möglichen Werte für die Transparenz reichen von 0 bis 1 beziehungsweise bis 100, wobei 0 in beiden Fällen für völlige Durchsichtigkeit, und der größte Wert für völlige Undurchsichtigkeit steht.

Um die Transparenz zu ändern, verändern wir den Wert von thOpacity. Beträgt er 0, wird er erhöht, beträgt er 100, wird er verkleinert. Die entsprechende Vergrößerung oder Verkleinerung ist - wie oben - durch die Addition einer positiven oder negativen Zahl einfach zu bewerkstelligen. Den neu berechneten Wert von thOpacity weisen wir anschließend der Style-Eigenschaft des Elements zu.

Die nächste Anweisung dient zum Ausblenden der Vorschaubilder, wenn der Kursor wieder aus dem Bereich des Hauptbildes herausbewegt wird:

function setClose() {
if(timer2) {
clearTimeout(timer2);
timer2 = null;
}
if(thOpacity >= 0) {
fadeThumbs(-20);
}
}

Auch hier muss der entsprechende Timeout gelöscht werden und, um die Vorschaubilder durchsichtig zu machen, rufen Sie fadeThumbs() auf. In diesem Fall ist der Funktion eine negative Zahl zu übergeben, um die Transparenz schrittweise zu verkleinern.

Bildwechsel

Jetzt ist nur noch das Ineinanderblenden der Hauptbilder zu lösen. Dies erfolgt durch einen Klick auf eines der Vorschaubilder. Dafür ist die folgende Funktion zuständig:

function view(nr) {
if(current != nr && !isFading) {
index++;
var img = document.createElement
('img');
img.src = 'pics/b'+ nr + '.jpg';
img.setAttribute('width', '420px');
img.setAttribute('height', '315px');
imgs.push(img);
document.getElementById("mainpic").
appendChild(img);
fadeImgs();
current = nr;
}
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".