Mijn-eigen-website.nl

Een slideshow maken voor je site

Er is ook een videotutorial beschikbaar over dit onderwerp (en over een heleboel andere onderwerpen die met website-ontwerp te maken hebben). Bekijk hier het aanbod van videotutorials op deze 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. Dit script is gratis te downloaden van de site responsiveslides.com. 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

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. Upload ze daarna naar de map met afbeeldingen op je eigen server.
  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.
  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 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 (Hoop 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. Gebruik je een van de responsive templates van mijn site, dan is je slideshow waarschijnlijk erg klein geworden. Dit komt doordat er in het stylesheet een regel staat over de afbeeldingsgrootte, die ook van invloed is op de slideshow. In het stylesheet staat namelijk het volgende blokje:
    #tekstvak img {
    max-width: 10%;
    }

    Omdat de slideshow ook in het onderdeel 'tekstvak' staat, en daar ook afbeeldingen (img) worden vertoond, hebben die een maximum-grootte van 10% van de breedte van je website. Je kunt dit blokje in zijn geheel weghalen (maar dan worden andere afbeeldingen die je had geplaatst, misschien te groot), of je kunt aan het blokje met stijlkenmerken voor de afbeeldingen in de slideshow (.rslides img) de volgende regel toevoegen: max-width: 100% !important;

    De toevoeging !important zorgt ervoor dat mogelijke andere opmaakinstellingen overschreven worden, en dat deze regel altijd voorrang heeft. De important-regel kun je ook toevoegen aan de waardes achter padding, margin, top en left in de stijlblokjes .rslides en .rslides li – daarmee overschrijf je dus eventuele andere waardes die de positie van je slideshow beïnvloeden.
  10. 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.

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

terug naar de homepage

Copyright © 2003-2014 Arkon v.o.f. – Leiden
contactsitemapprivacybeleid