scrollleiste.de

Elegantes Slideshow-Widget per JavaScript

von Christoph Dietrich

Von dem erst 17-jährigen argentinischen Web-Entwickler Guillermo Rauch stammt ein Nachbau der JavaScript-Slideshow, die der eine oder andere von Obama’s Wahlkampfwebsite kennt. Mit „BarackSlideshow“ lassen sich Bilder nacheinander abspielen, der Titel des jeweils aktuellen Bildes wird rechts daneben durch einen wandernden Pfeil und ggf. durch eine andere Formatierung hervorgehoben:

BarackSlideshow


Voraussetzung ist die Verwendung des JavaScript-APIs Mootools. Das HTML bleibt durch eine reine Injektion per CSS und JavaScript sauber und semantisch korrekt. Dies ist das komplette Markup des Demos auf der Website von Guillero Rauch:

<div id="slideshow">    
   <span id="loading">Loading</span>
   
   <ul id="pictures">   
      <li><img src="melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>
      <li><img src="buenos_aires.jpg" alt="Buenos" title="Buenos" /></li>
      <li><img src="urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>
      <li><img src="london.jpg" alt="London" title="London" /></li>
      <li><img src="venice.jpg" alt="Venice" title="Venice" /></li>
      <li><img src="paris.jpg" alt="Paris" title="Paris" /></li>
      <li><img src="osaka.jpg" alt="Osaka" title="Osaka" /></li>        
   </ul>
   
   <ul id="menu">
      <li><a href="melbourne.jpg">Melbourne</a></li>
      <li><a href="buenos_aires.jpg">Buenos Aires</a></li>
      <li><a href="urubamba.jpg">Urubamba</a></li>
      <li><a href="london.jpg">London</a></li>
      <li><a href="venice.jpg">Venice</a></li>
      <li><a href="paris.jpg">Paris</a></li>
      <li><a href="osaka.jpg">Osaka</a></li>
   </ul>
   
</div>

3 Kommentare

Schöne Sache! Interessant ist auch eine Umsetzung von JQuery auf der Lidl-Reisen-Website , wenn man unter dem Hauptbild über die einzelnen Textboxen fährt. Das Bild slidet vorbei und erweckt den Anschein von Flash. Ist aber ressourcensparender!

rob

@rob
davon abgesehen dass kein Mensch den Text lesen kann der in Weiß vor den Bildern hängt..

paukul

@paukul (erst sehr spät deinen comment gesehen):
?
Kann nicht nachvollziehen was du meinst. Der Text ist stets in einem blauen Kasten verschachtelt und damit problemlos lesbar!?

rob