Afbeeldingen

Helpers

Class Omschrijving 
image
 Maakt de afbeelding responsive 
image image-center
 Plaatst responsive afbeelding in het centrum 
image image-max
 Plaatst responsive afbeelding 100% x 100% 
image image-hover
 Geeft de responsive afbeelding hover effect

Slideshow

foto 1
foto3
foto4
foto5
foto6
foto7
foto8
foto9
foto10
foto11
<div class="slider">
  <div style="display: inline-block"><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <button class="next"></button>
  <button class="prev"></button>		
</div>

Thumbnails en popups

thumbnail thumbnail thumbnail
popup
popup
popup

Om de popup afbeelding te openen moet je deze code toevoegen:

data-popup-open="image-1"

Waar elke afbeelding een unieke code moet hebben.

<div class="thumbnail">
  <img alt="" class="thumb" src="" data-popup-open="image-1" />
  <img alt="" class="thumb" src="" data-popup-open="image-2" />
</div>

Deze unieke code moet terugkomen in de popup code:

<div class="popup" data-popup="image-1" data-popup-close="image-1">
  <div class="popup-inner">
    <img alt="" class="image-max" src="" />
    <a class="popup-close" data-popup-close="image-1" href="javascript:void(0);"></a>
  </div>
</div>

<div class="popup" data-popup="image-2" data-popup-close="image-2">
  <div class="popup-inner">
    <img alt="" class="image-max" src="" />
   <a class="popup-close" data-popup-close="image-2" href="javascript:void(0);"></a>
  </div>
</div>

Scroll Gallerie

<div class="scroll-gallery">
  <img src="" alt="" width="600" height="400">
  <img src="" alt="" width="600" height="400">
  <img src="" alt="" width="600" height="400">
</div>

Overlay effecten

fade
Avatar
Hello World
<div class="img-fade-container">
  <img src="" alt="Avatar" class="img-fade-image">
  <div class="img-fade-overlay">
    <div class="img-fade-text">Hello World</div>
  </div>
</div>
slidetop
Avatar
Hello World
<div class="img-slidetop-container">
  <img src="" alt="Avatar" class="img-slidetop-image">
  <div class="img-slidetop-overlay">
    <div class="img-slidetop-text">Hello World</div>
  </div>
</div>
slidebottom
Avatar
Hello World
<div class="img-slidebottom-container">
  <img src="" alt="Avatar" class="img-slidebottom-image">
  <div class="img-slidebottom-overlay">
    <div class="img-slidebottom-text">Hello World</div>
  </div>
</div>
slideright
Avatar
Hello World
<div class="img-slideright-container">
  <img src="" alt="Avatar" class="img-slideright-image">
  <div class="img-slideright-overlay">
    <div class="img-slideright-text">Hello World</div>
  </div>
</div>
slideleft
Avatar
Hello World
<div class="img-slideleft-container">
  <img src="" alt="Avatar" class="img-slideleft-image">
  <div class="img-slideleft-overlay">
    <div class="img-slideleft-text">Hello World</div>
  </div>
</div>
zoom
Avatar
Hello World
<div class="img-zoom-container">
  <img src="" alt="Avatar" class="img-zoom-image">
  <div class="img-zoom-overlay">
    <div class="img-zoom-text">Hello World</div>
  </div>
</div>
Tekst
Avatar
Mijn naam is John
<div class="img-title-container">
  <img src="" alt="Avatar" class="img-title-image">
  <div class="img-title-overlay">Mijn naam is John</div>
</div>