In einem vorherigen Artikel habe ich kleine Diashow mit jQuery gezeigt, die ich nun noch um ein paar weitere Features ergänzen möchte. Bisher wurden in diesem kleinen jQuery-Skript nur die Bilder selbst ausgetauscht. Nun möchte ich noch für jedes Bild einen Link vergeben. Dadurch könnte man das Skript auch für wechselnde Banner verwenden.

Dafür müssen ein paar kleine Anpassungen gemacht werden. Zunächst werden alle Bilder noch mit Links versehen und das inline-CSS vom jeweiligen Bild zum a-Tag verschoben werden. Auch die ID des ersten Bildes wird hier dem entsprechende a-Tag gegeben.

<div id="imageblock" style="margin-bottom:30px;">
   <a href="link1.html" style="" id="currentpic">
      <img src="images/diashow1.jpg" title="pic1" />
   </a>
   <a href="link2.html" style="display:none;">
      <img src="images/diashow2.jpg" title="pic2" />
   </a>
   <a href="link3.html" style="display:none;">
      <img src="images/diashow3.jpg" title="pic3" />
   </a>
   <a href="link4.html"  style="display:none;">
      <img src="images/diashow4.jpg" title="pic4"/>
   </a>
</div>

Auch im Bereich des jQuery-Codes müssen für den Bannerwechsel ein paar Anpassungen vorgenommen werden. Statt den Bildern müssen nun die Links angesprochen werden. Auch kann die IF-Abfrage nicht mehr auf das src-Attribut des nächsten Elements zugreifen, sondern es muss das href-Attribut des Links abfragen.

<script type="text/javascript">
jQuery(document).ready(function(){
    window.setTimeout('nextpic()', 5000);
});
function nextpic()
{    
   if (jQuery("#currentpic").next().attr("href") == undefined){
      jQuery("#currentpic").attr("style", "display:none;");
      jQuery("#currentpic").attr("id", "");
      jQuery("#imageblock a:first").attr("id","currentpic");
      jQuery("#currentpic").attr("style", "");
}
else{
      jQuery("#currentpic").next().attr("id", "next");
      jQuery("#currentpic").attr("style", "display:none;");
      jQuery("#currentpic").attr("id", "");        
      jQuery("#next").attr("id", "currentpic");
      jQuery("#currentpic").attr("style", "");
}
window.setTimeout('nextpic()', 5000);
}
</script>

Nun werden nicht nur die Bilder selbst durchgewechselt, sondern auch für jedes Bild ein andere Link verwendet. Diese jQuery-Skript lässt sich natürlich nicht nur für Bilder oder für den einen Bannerwechsel verwenden. Mit ein paar kleinen Anpassungen kann man auch p-Tags, Formulare oder Tabellen austauschen (aus welchem Grund man das auch immer tun will).

Ähnliche Beiträge:

1. Diashow mit jQuery Wer etwas bewegung in die eigene Webseite bringen möchte, macht das am besten mit einer kleine Diashow. Mit dem Javascript-Framework...
2. Bilder tauschen mit jQuery Ein schöner Effekt ist das Tauschen von Bildern beim Überfahren mit der Maus. Hier kann man ein großes Bild schön...