Effektvolle Bilder

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

30.11.2009 von Redaktion pcmagazin

ca. 1:50 Min
Ratgeber
  1. CSS-Trick: Slideshow mit opacity selbst erstellen
  2. Teil 2: CSS-Trick: Slideshow mit opacity selbst erstellen
  3. Teil 3: CSS-Trick: Slideshow mit opacity selbst erstellen
  4. Teil 4: 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
Die vorgestellte Slideshow ist äußerst kompakt und daher auch für beschränkte Platzverhältnisse bestens geeignet.
© Archiv
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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.