Effektvolle Bilder

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

30.11.2009 von Redaktion pcmagazin

Inhalt

CSS-Trick: Slideshow mit opacity selbst erstellen
Teil 2: CSS-Trick: Slideshow mit opacity selbst erstellen
Teil 3: CSS-Trick: Slideshow mit opacity selbst erstellen
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.

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;
}
}