In 9 stappen een prachtige slideshow maken

Een slideshow geeft door de bewegende beelden en interactiviteit direct leven aan je site!

Wil je een slideshow (of diavoorstelling) maken voor op je website, dan heb je daarvoor een script (programmaatje) nodig. Voor de slideshow hieronder heb ik gebruikgemaakt van het script ResponsiveSlides. Het voordeel van dit script – zoals de naam al aangeeft – is dat het past binnen een responsive ontwerp, dat wil zeggen dat de breedte van de slideshow zich automatisch aanpast aan de breedte van het scherm van degene die je pagina bekijkt.

De basis-installatie

Zo installeer je een dergelijke diavoorstelling op je site:

1. Zorg ervoor dat de afbeeldingen die je wilt laten zien allemaal hetzelfde formaat hebben. Zorg er verder voor dat de bestandsgrootte van elke foto niet te groot is (zelf houd ik altijd een maximumgrootte van 100 kB aan). Hier lees je hoe je een afbeelding verkleinen kunt. Ben je klaar, upload ze daarna allemaal naar de map met afbeeldingen op de server van je webhost.

2. Ga dan naar responsiveslides.com en klik op de downloadlink van het script. Je wordt doorgestuurd naar een andere site, waar je de bestanden die je nodig hebt kunt downloaden in gezipt formaat (de downloadknop staat in de rechterkolom (download ZIP)). Pak dit zip-bestand uit op je eigen computer.

3. In het gedownloade zip-bestand bevindt zich een bestand met de naam ‘ResponsiveSlides.js’. Upload dit bestand naar je server, eventueel naar een aparte map (bijvoorbeeld een map met de naam overig, waarin je ook je stylesheet en misschien andere script-bestanden hebt opgeslagen.)

4. Upload daarna het bestand themes.gif (uit de submap themes van de demo-map van de slideshow) naar de afbeeldingenmap op je server.

5. Ga vervolgens weer naar responsiveslides.com en kopieer de code uit het eerste vak (1. Link files). Plak deze code in de head van de pagina waarin je de slideshow wilt opnemen. De tweede regel van deze code (<script src="responsiveslides.min.js"></script>) verwijst naar het javascript-bestand dat je in stap 3 hebt geüpload naar je server. Als je dat bestand in een aparte map hebt gezet, moet je de verwijzing natuurlijk even aanpassen, bijvoorbeeld: <script src="overig/responsiveslides.min.js"></script>

6. Kopieer nu het gedeelte uit vak 2 (Add Markup) van responsiveslides.com. Plak dit gedeelte in je webpagina, op de plaats waar je de slideshow wilt laten zien. Geef deze slideshow eventueel nog een eigen id door van <ul class="rslides"> te maken: <ul class="rslides" id="slideshow-1"> – dit is handig als je meerdere slideshows op één pagina zou willen laten vertonen; elke slideshow kun je dan zijn eigen stijleigenschappen geven.

   Pas ook de verwijzingen naar de foto’s die je wilt laten zien zodanig aan, dat ze ‘kloppen’: dus vervang de namen van de foto’s in dit stukje code, en heb je je foto’s in een aparte afbeeldingenmap gezet, geef de naam van die map dan ook op, bijvoorbeeld: <img src="afbeeldingen/vlinder-1.jpg" alt="">

7. Ga nog eens terug naar responsiveslides.com en kopieer het gedeelte uit vak 3 (Add CSS). Plak deze code onderaan het stylesheet dat bij je website hoort.

8. Je moet nog een laatste keer terug naar responsiveslides.com om het gedeelte uit vak 4 (Hook up the slideshow) te kopiëren. Plak deze code in je webpagina, in de head, vlak onder de andere scripts die je er net hebt neergezet. Als je op je pagina meerdere slideshows wilt neerzetten, vervang je nu .rslides door #slideshow-1 (hierdoor zorg je ervoor dat alles wat je hier straks aan stijlkenmerken neerzet, alleen betrekking heeft op deze ene slideshow). Sla alle bestanden op, upload ze eventueel en bekijk de pagina in je browser.

9. Afhankelijk van de positie van je slideshow, kan het zijn dat – als je met je muis over het hoofdmenu beweegt – de slideshow bovenop je submenu ligt. Om dat te verhelpen open je je stylesheet en zoek je het blokje stijlkenmerken op voor het submenu (in het geval van de responsive templates van deze site is dat: #hoofdmenu > li:hover ul {). Daar staat een waarde achter de zogenaamde z-index (z-index: 2;). De z-index beïnvloedt de volgorde waarin de verschillende elementen van je site worden ‘gestapeld’. Hoe hoger de waarde, hoe meer ‘bovenop’ dit onderdeel komt te liggen. Verander je deze z-index van 2 naar 10 bijvoorbeeld, dan komt het submenu bovenop de slideshow te liggen.

Uitbreidingen

Je hebt nu een basisversie van de slideshow geïnstalleerd, die je nog op verschillende manieren kunt uitbreiden:

• Om pijltjes in de slideshow op te nemen, waarmee je voor- en achteruit kunt bladeren, moet je het stylesheet (demo.css) van de bijgeleverde demo (uit het zip-bestand) openen. Kopieer alles wat begint met .callbacks en plak dit onderaan je eigen stylesheet.

  Ergens in dit stukje gekopieerde code staat een verwijzing naar het bestand met de pijltjes: url("themes/themes.gif") – zorg ervoor dat deze verwijzing klopt. ‘Denk’ daarbij vanuit je stylesheet. Als je dit bestand in een map hebt gezet die afbeeldingen heet, en je stylesheet staat in een map overig, dan vervang je themes dus door ../afbeeldingen. (Vanuit de map overig moet je namelijk eerst een map ‘omhoog’, en dan naar de map afbeeldingen om het bestand ‘themes.gif’ te kunnen vinden. De twee puntjes betekenen dat je een map ‘omhoog’ gaat.)

  Zet in je webpagina je slideshow in een div dat je de class callbacks_container geeft. Dus:

  <ul class="rslides" id="slideshow-1">

  wordt:

  <div class="callbacks_container"><ul class="rslides" id="slideshow-1">

  en achter de afsluitende ul (</ul>) zet je nog een afsluitende div: (</div>)

  Daarna ga je naar de laatste scriptcode in je head, en vervang je

  $("#slideshow-1").responsiveSlides();

  door:

  $("#slideshow-1").responsiveSlides({namespace: "callbacks", nav: true});

• Op dezelfde plaats kun je nog meer kenmerken toevoegen voor de slideshow, bijvoorbeeld de snelheid tussen de overgangen van de ene foto naar de andere: speed: 1000 (hoe hoger deze waarde, hoe trager). En met de instelling random: true zorg je ervoor dat de foto’s in willekeurige volgorde worden vertoond. Zet komma’s tussen de verschillende instellingen. Meer opties voor instellingen vind je in het vak 5 (Options you can customize) bij responsiveslides.com.

• Onderschriften aan de foto’s voeg je toe door een paragraaf met de class caption direct na de desbetreffende afbeeldingscode neer te zetten. In het voorbeeld op deze pagina ziet dat er bijvoorbeeld zo uit:

  <li><img src="https://de-help-desk.nl/images/faq/webdesign/vlinder-1.jpg" alt=""><p class="caption">Vlinder 1</p></li>

Bijlagen:
ResponsiveSlides.js.zip