GeekLand

Slideshows sind eine prima Technik um mehr Inhalt auf wenig Platz unterzubringen. Zusätzlich dazu freut sich der Betrachter darüber, dass ein wenig Firlefanz auf der Site auftaucht.

Problem oft: Blende ich meine Slideshows via AJAX ein, dann bekommt Google davon nichts mit. Google macht nämlich kein JavaScript (wobei ich den Verdacht habe, dass inzwischen auch Google ein bisschen JavaScript macht…). Anderes Problem: Blende ich die zuerst unsichtbaren Bereiche mittels ‘display:none’ aus, gibt’s womöglich gar ein böses Penalty vom Google.

Die gute Lösung: Den ganzen Content via div’s separieren und auf die Klammer (z.B. ein ul) dann eine jQuery Slideshow draufbauen.

Dazu ein wenig Beispielcode von meiner Beratungsseite entnommen:

Im header der Seite müssen die Scripts inkludiert werden:

<script type=“text/javascript” src=“/jquery.js”></script>
<script type=“text/javascript” src=“/jquery.cycle.all.js”></script>

Die entsprechenden Quellen gibt es hier (jquery.js) und hier (jquery.cycle.all.js) abzuholen.Dann braucht es eine Funktion, die die Slideshow definiert und einen Starttrigger der die Show “afterload” anstartet:

<script type=“text/javascript”>
function CycleRefs() {
 $(’#referenzen’).cycle({
    fx:     ’scrollRight’,
    delay: -1000,
    xsync: 1
 });
} 

$(document).ready( function(){
  CycleRefs();
});

</script>

Wie man sieht, versucht die Funktion CycleRefs() ein DOM Element mit der Id “referenzen” zu benutzen. Dieses Element muss man im HTML-Quelltext also definieren:(Ab jetzt geht’s im body Bereich weiter)

<div id=“referenzen” class=‘whatever’>
  <div>
    <img …>
    <span class=‘description’>
      <h4>Ein Header</h4>
          Ein blabla.
    </span>

  </div> 

  <div> <img ..>
    <span class=‘description’>
       <h4>Mehr Inhalt</h4>
       Mehr blabla.
    </span>
  </div>
</div>

Wichtig dabei ist, dass das Element mit der referenzierten id ein block-level element ist (also per default ein display: block hat). Die zweite Ebene an block-level Elementen wird dann rotiert. Falls man da “li”’s haben will, muss man die li’s per CSS zum block-level Element machen.

Soweit, sogut. Wenig Arbeit für einen hübschen Effekt! Und weil alles im Klartext als HTML dasteht, kommt auch Google und Co. gut klar.