Eind jaren negentig kon je nog wegkomen met een lange lijst foto’s bij wijze van online fotoalbum, maar anno 2012 moet dat toch minstens een diashow met animaties zijn. Met een beetje html- en javascriptkennis kun je snel met jQuery aan de slag.
jQuery is een javascript-framework. Dat houdt in dat je in javascript programmeert en gebruikmaakt van javascript-notatie voor jQuery-functies. Het voordeel is onder meer dat je sitebezoekers geen plugins nodig hebben: jQuery werkt in alle bekende browsers. Als webontwikkelaar kun je bovendien je favoriete ontwikkelomgeving gebruiken, of dat nu Adobe Dreamweaver is of Kladblok. Het enige voorwerk is het toevoegen van de javascript-library van jQuery aan je html-bestand. Download daarvoor de jQuery-bibliotheek van www.jquery.com. Je kunt kiezen uit twee versies: voor testen is de iets grotere Development-versie goed genoeg. Plaats het bestand in dezelfde map als je html-pagina en hernoem het naar jquery.js. In de header van je html-pagina laad je de bibliotheek in. Voor deze workshop maken we gebruik van de volgende lege pagina, waaraan we later code gaan toevoegen:
<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">Hier komen de javascript- en jQuery-scriptregels.</script>
</head><body>Hier komen de opmaakelementen.</body></html>
Sla deze pagina op (bijvoorbeeld als index.html) en open hem in je browser. Omdat javascript en dus ook jQuery lokaal door je browser gerenderd worden, kun je alle hier besproken voorbeelden zelf uitproberen in je browser door eenvoudigweg de html-pagina te openen. Enige basiskennis van html is benodigd: zorg dat je de structuren van de genoemde codefragmenten doorgrondt, indien nodig door ze zelf in Kladblok te voorzien van de juiste tabafstanden.
Slideshow
Zelf een slideshow maken, is met jQuery een fluitje van een cent. Er zijn verschillende plugins beschikbaar. Slides is daarvan een van de makkelijkere. Je kunt Slides downloaden als zip-bestand op www.slidesjs.com. Pak alleen het bestand slides.jquery.js uit en plaats het in dezelfde map als je html- en jQuery-bestand. Onder de regel waarin jquery.js wordt aangeroepen, voeg je de aanroep voor Slides toe:
<script type=”text/javascript” src=”slides.jquery.js”></script>
In de header voeg je de volgende regels toe tussen de tweede set <script>-tags:
$(function(){
$("#slides").slides();
});
Deze code zorgt voor het starten van de Slides-plugin. In het body-deel van je html-pagina plaats je vervolgens de slideshow op het gewenste punt. Daarvoor voeg je de volgende code toe:
<div id="slides"><div class="slides_container">
<div><h1>Slide 1</h1><p><img src=”foto1.jpg”></p></div>
</div></div>
Per foto voeg je een ‘slide’ toe. In de voorbeeldcode staat er één, maar door eenvoudigweg een nieuw <div>-blokje toe te voegen, kun je zo veel foto’s toevoegen als je wilt. Plaats de code direct onder elkaar, binnen de eerste <div>-tagsets:
<div><h1>Slide 1</h1><p><img src=”foto1.jpg”></p></div>
<div><h1>Slide 2</h1><p><img src=”foto2.jpg”></p></div>
<div><h1>Slide 3</h1><p><img src=”foto3.jpg”></p></div>
Met deze code heb je de basale versie van de slideshow al staan. Open de pagina in je browser om het resultaat te bewonderen. Het bekende slide-effect is te bekijken door op de link voor slide 1, 2 of 3 te klikken. De mooie effecten krijg je echter pas na enkele css-tweaks en het toevoegen van navigatie-elementen. Gelukkig is het zip-bestand van Slides voorzien van diverse voorbeelden. Als je alle bestanden uitpakt, vind je in de map Examples enkele goede voorbeeldscripts. De submap Images-with-captions bevat afbeeldingen en css-stijlen om een grafisch indrukwekkende show op te zetten.
We gaan niet in op alle code uit dat voorbeeld, maar als je de bestanden hebt uitgepakt, kun je de structuur snel doorgronden. Open als eerste index.html in Kladblok. Dit bestand is hetzelfde opgebouwd als ons testbestand. Zo zien we de aanroepen voor jQuery en Slides en daarnaast een verwijzing naar het stylesheet-bestand global.css in de submap css. De eenvoudige aanroep die we zelf schreven voor de Slides-functie (de eerder genoemde $(function(){ ...) is hier aanzienlijk uitgebreid met diverse opties, zoals preload, preloadImage, play en pause. Deze zorgen ervoor dat de afbeeldingen al van tevoren worden ingeladen, zodat de slideshow vloeiend af kan spelen. Play en pause geven waardes aan (in milliseconden) die bepalen hoe lang de foto’s in beeld blijven. Op www.slidesjs.com vind je onderaan de pagina een compleet overzicht van opties.
Het css-bestand global.css is ook erg uitgebreid. De belangrijkste instellingen vind je onder .slides_container (de hoogte en breedte van je slides) en .body (onder andere lettertype). Zeker wat betreft de css-opmaakinstellingen is het een kwestie van proberen tot je een instelling hebt die je bevalt. De standaardinstelling van Slides zorgt al voor een nette slideshow, maar om deze in je site te integreren, zul je naar alle waarschijnlijkheid afmetingen en kleuren moeten aanpassen. Sowieso moet je ervoor zorgen dat de foto’s voor in de slideshow enigszins op elkaar afgestemd zijn qua formaat: ze moeten wel binnen het kader van de slideshow passen.
De voorbeeldcode van Images-with-captions is zeer eenvoudig te hergebruiken voor je eigen slideshow. Zorg voor evenveel <div>-blokken als foto’s en vervang de afbeeldingen, bijschriften en alt-tags door je eigen materiaal.
Menu’s
Het vervangen van een statisch lijstje links door een gelikt menu zorgt ook voor een aantrekkelijke site. Met jQuery kun je tevens snel uitklapmenu’s bouwen, in alle soorten en maten. Een zeer eenvoudige plugin is die van Apycom (www.apycom.com). Je kunt kiezen uit verschillende menustijlen en -kleuren. Voor thuisgebruik zijn de menu’s gratis, maar als je uit alle kleuren wilt kiezen of een commerciële site hebt, zul je moeten betalen. Klik op het menu naar keuze om de gratis versie te downloaden en pak het bestand uit. Wij gaan aan de slag met stijl 16 (www.apycom.com/menus/16-yellow-green.html).
Het zip-bestand bevat ook het jQuery-framework (jquery.js), maar om zeker te weten dat je daarvan de laatste versie hebt, kun je die beter vervangen door de officiële download van www.jquery.com. Net als Images-with-captions werkt ook deze plugin met een css-bestand waarin de opmaak is opgenomen. Open menu.css in Kladblok en kijk bijvoorbeeld onder #menu a en #menu div a span om de kleuren aan te passen door middel van rgb-waarden. Verder is er de map images, met enkele kleine afbeeldingen die in de menu’s worden gebruikt. Tot slot worden in het zip-bestand ook een voorbeeld-index.html en een helpbestand meegeleverd. De opbouw is echter zeer eenvoudig, dus gaan we aan de slag met ons eigen, lege html-bestand.
Gebruik de lege pagina die we aan het begin van het artikel hebben opgezet. Boven de jQuery-aanroepregel moet je voor de opmaak een verwijzing opnemen naar het css-bestand. Voeg onder de aanroepcode voor jQuery de regel voor het menuscript toe. Het geheel ziet er dan als volgt uit:
<link type=”text/css” src=”menu.css” rel=”stylesheet” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”menu.js”></script>
Verder hoef je alleen nog maar het menu op te bouwen. Dit doe je tussen de <body>-tags van de pagina en heeft de vorm van een traditionele lijst. Voeg aan de lijstitems de juiste stijltags toe (zoals class=“menu”) en je bent klaar. Een eenvoudig menu met submenu’s ziet er bijvoorbeeld zo uit:
<div id="menu"><ul class="menu">
<li><a href="#" class="parent"><span>Foto's</span></a>
<div><ul>
<li><a href="#"><span>Pasfoto's</span></a></li>
<li><a href="#" class="parent"><span>Vakantiefoto's</span></a>
<div><ul>
<li><a href="bratislava.html"><span>Bratislava</span></a></li>
<li><a href="rome.html"><span>Rome</span></a></li>
</ul></div></li></ul></div></li>
<li class="last"><a href="#"><span>Over ons</span></a>
<div><ul>
<li><a href="mailto:lezers@pcmweb.nl"><span>Contact</span></a></li>
<li><a href="http://www.pcmweb.nl"><span>Homepage</span></a></li>
</ul></div></li></ul></div>
Het helpbestand dat bij de plugin wordt geleverd, heeft een duidelijk overzicht van de mogelijkheden. Let bij het invoeren van de menustructuur op de onderverdeling in menu’s en submenu’s. Door een nieuwe lijst (met de tags <div><ul>) te beginnen binnen een bestaande lijst, maak je een submenu.
De javascriptcode van Apycom is beveiligd: als je op je menupagina niet ergens een verwijzing naar hun homepage opneemt (dat mag onderaan de pagina, of waar je maar wilt), dan wordt linksboven het menu een verwijzing ingevoegd; een kleine prijs om te betalen voor het gratis gebruik van deze plugin. Wil je hierom een andere plugin gebruiken, voer dan een Google-zoekopdracht uit op ‘jquery menu’: een enorme hoeveelheid plugins staat tot je beschikking.