Overzicht

De Responsive Thumbnails plugin kunt u gebruiken wanneer u deze in uw beheer-systeem (cms) of website nodig heeft.

Deze plugin bevat de volgende functionaliteit;

  • Afbeeldingen gallerij flexibel op vrijwel alle apparten, brow py-4sers, scherm-groottes en orientaties
  • Responsive thumbnails
  • Geïntegreerde lightbox (FancyBox)
  • Gemmakkelijk aan te passen met de volgende programmeertalen; html, php, javascript en css

Voorbeeld

Hieronder ziet u een werkend voorbeeld van de plugin.

ons_bedrijf.jpg
758 kb (758.153 bytes)
onze_mensen_aan_het_werk_1.jpg
758 kb (758.153 bytes)
onze_mensen_aan_het_werk_2.jpg
758 kb (758.153 bytes)
onze_mensen_aan_het_werk_3.jpg
758 kb (758.153 bytes)
HIER_DE_NAAM.jpg
758 kb (758.153 bytes)
HIER_DE_NAAM.jpg
758 kb (758.153 bytes)

Naar implementatie

Implementatie

Implementatie van deze plugin stap voor stap beschreven.

1. Download de bestanden

plugin_responsive_thumbnails_01.00.04.zip

1. Invoegen benodigde css bestanden (cdn)

Voeg de links naar de benodigde stylesheets in vóór het einde van head-tag 

<!-- Bootstrap5 CDN (css) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

<!-- Bootstrap5 ICONS (css) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<!-- FancyBox Plugin (css) -->
<link rel="stylesheet" href="https://code.toonlenkens.nl/fancybox/jquery.fancybox.css">

<!-- Custom, override en FancyBox-override (css) -->
<link rel="stylesheet" href="layout/style.css">
2. Invoegen benodigde js bestanden (cdn)

Voeg de links naar de benodigde javascript-bestanden in vóór het einde van body-tag 

<!-- code Jquery 3 (js) -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- code Bootstrap 5.0.2 (js) -->
<script src="https://code.toonlenkens.nl/bootstrap5/js/bootstrap.bundle.min.js"></script>

<!-- code Bootstrap tooltips & poppers (js) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

<!-- FancyBox plugin (js) -->
<script src="https://code.toonlenkens.nl/fancybox/jquery.fancybox.js"></script>
2. Invoegen van javascript-bestanden

Voeg de volgende javascript-bestanden toe, vlak vóór het einde van de body-tag.

TEST
TEST
TEST