Mijn-eigen-website.nl

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.

  • Vlinder 1

  • Vlinder 2

  • Vlinder 3

  • Vlinder 4

  • Vlinder 5

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.min.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 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. Vervang 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:

Copyright © 2004-2015 Arkon v.o.f. – Leiden
contactsitemapprivacybeleid