met jQuery tabs kun je heel gemakkelijk een mooie slideshow maken

Met jQuery tabs kun je prima een slideshow maken! Als je de jQuery UI toch al gebruikt voor je site scheelt je dat weer een paar kb, omdat je geen nieuwe plugin hoeft te downloaden, en je kunt ook nog eens gebruik maken van alle extra functionaliteit die er al standaard in zit (cookies, cache, openen met een specifieke slide).

Met jQuery tabs een slideshow maken
Bekijk de slideshow (met cookies) »
De slideshow openen met de ISIS slide »

Hieronder leg ik uit hoe je dit bouwt. Heb je geen zin om dat allemaal te lezen? Je kunt ook meteen een zip downloaden met daarin alle bestanden.

Stap 1. De HTML

De HTML is vrij simpel. Een ul met daarin de links, en daaronder vier divs met de inhoud van elke tab. Precies zoals je normaal de tabs gebruikt.

<div id="slideShow">
  <ul>
    <li>
      <a href="#Cult_of_luna">
        <strong>Cult Of Luna</strong>
        Het Burgerweeshuis, Deventer
      </a>
    </li>
    <li>
      <a href="#ISIS">
        <strong>ISIS</strong>
        Vera, Groningen
      </a>
    </li>
    <li>
      <a href="#Underoath">
        <strong>Underoath</strong>
        De Melkweg, Amsterdam
      </a>
    </li>
    <li>
      <a href="#Nick_oliveri">
        <strong>Nick Oliveri</strong>
        Simplon, Groningen
      </a>
    </li>
  </ul>
  <div id="Cult_of_luna">
    <a href="http://www.flickr.com/photos/eworm/2187403425/">
      <img src="cult_of_luna.jpg" alt="Cult of luna" />
    </a>
  </div>
  <div id="ISIS">
    <a href="http://www.flickr.com/photos/eworm/4166035502/">
      <img src="isis.jpg" alt="ISIS" />
    </a>
  </div>
  <div id="Underoath">
    <a href="http://www.flickr.com/photos/eworm/4442146357/">
      <img id="Underoath" src="underoath.jpg" alt="Underoath" />
    </a>
  </div>
  <div id="Nick_oliveri">
    <a href="http://www.flickr.com/photos/eworm/4713275941/">
      <img src="nick_oliveri.jpg" alt="Nick Oliveri" />
    </a>
  </div>
</div>
</div>

Stap 2. De CSS

De CSS hoef ik verder niet uit te leggen denk ik, die wordt alleen gebruikt voor het positioneren van de verschillende onderdelen.

#slideShow {
  width: 578px;
  height: 264px;
  border: 1px solid #1537a5;
  overflow: hidden;
  float: left;
  position: relative;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
#slideShow ul {
  width: 191px;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}
#slideShow li {
  width: 191px;
  height: 66px;
  padding: 0;
  list-style-type: none;
  display: block;
}
#slideShow strong {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
#slideShow ul a {
  width: 149px;
  height: 56px;
  padding: 10px 0 0 10px;
  text-decoration: none;
  display: block;
  background: #3285ea url("default.png") repeat-x left bottom;
  position: relative;
  z-index: 100;
  line-height: 12px;
  color: #fff;
  float: left;
}
#slideShow ul a:hover, #slideShow ul .ui-tabs-selected a, #slideShow ul .ui-state-active a
{
  padding-right: 32px;
  background: url("selected.png") no-repeat right top;
  color: #343434;
}
#slideShow span {
  width: 420px;
  height: 266px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}
#slideShow img {
  float: right;
  cursor: pointer;
}
.ui-tabs .ui-tabs-hide {
  display: none;
}

Stap 3. De javascript

De javascript is het leukst. Het eerste gedeelte initaliseert de tabs, met drie opties. De tabs verwisselen ik met een mouseover, en ik verwissel ze met een opacity effect. Ook gebruik ik cookies om te onthouden welke tab als laatste bekeken is. Als je klikt op een link in de ul haal ik de href van de bijbehorende tab op, en gebruik die om de tab klikbaar te maken.

$(document).ready(function(){
  $("#slideShow").tabs({
    event: 'mouseover',
    fx: [{opacity:'hide', duration:'slow'},{opacity:'show', duration:'slow'}],
    cookie: { expires: 30 }
  });
  $("#slideShow ul a").click(function(){
    var urlVar = $(this).attr("href").substr(1);
    var computedUrl = $("div[id=" + urlVar + "]");
    location.href = $("a", computedUrl).attr("href");
    return false;
  });
});

Et voila! Een volledig werkende slideshow!

0 Reacties

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *