flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Thumbnail


Introductie

Een thumbnail is een kleine afbeelding die een grotere afbeelding vertegenwoordigt (zichtbaar wanneer erop wordt geklikt) en die vaak wordt herkend met een rand eromheen.

Click on the class name to copy it.

thumbnail Hoofd class voor het thumbnail block

Elements en Classes van de popup

Click on the class name to copy it.

data-popup-open=" " Opent popup element
data-popup=" " Popup blok element
data-popup-close=" " Sluit popup block element
popup Hoofd class van het popup block
popup-inner Class popup inhoud
image-max Class voor maximale afbeelding
popup-close Class voor de sluit knop

Voorbeeld

thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail

Voorbeeldcode:

<div class="container-sm">
  <div class="container">
    <div class="thumbnail">
      <img alt="thumbnail" src="images/zomer6.jpg" data-popup-open="image-1" />
      <img alt="thumbnail" src="images/003.jpg" data-popup-open="image-2" />
      <img alt="thumbnail" src="images/004.jpg" data-popup-open="image-3" />
      <img alt="thumbnail" src="images/005.jpg" data-popup-open="image-4" />
      <img alt="thumbnail" src="images/006.jpg" data-popup-open="image-5" />
      <img alt="thumbnail" src="images/007.jpg" data-popup-open="image-6" />
      <img alt="thumbnail" src="images/008.jpg" data-popup-open="image-7" />
      <img alt="thumbnail" src="images/009.jpg" data-popup-open="image-8" />
      <img alt="thumbnail" src="images/010.jpg" data-popup-open="image-9" />
      <img alt="thumbnail" src="images/011.jpg" data-popup-open="image-10" />
    </div>
  </div>
</div>

<div class="popup" data-popup="image-1">
  <div class="popup-inner">
    <img alt="popup" class="image-max" src="../images/zomer6.jpg" />
    <a class="popup-close" data-popup-close="image-1" href="#">x</a>
  </div>
</div>
...
...
...
...


© Copyright by Web Henkie
All right reserved
Webmaster