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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…