{% comment %}##################################################################


function create-image-gallery

input: include.path: Pfad zum Ordner include.lb: Bezeichnung für die Lightbox-Sammlung include.size: Groesse der Bilder: small, medium, large

output: Erzeugt eine Light-Box Image-Gallery durch Auslesen aller Bilder eines Ordners

Aufruf: {% include functions/create-image-gallery.html path='' %}

author: se


###############################################################{% endcomment %}

{% if include.path %} <!– Slider main container –> <div class=“swiper-container”>

<!-- Additional required wrapper -->
<div class="swiper-wrapper">
  <!-- Slides -->
  {% for image in site.static_files %}
  {% if image.path contains include.path %}
  {% assign img-name = image.path | replace: "-", " " %}
  {% assign img-name = img-name | replace: "_", " " %}
  {% assign img-name = img-name | replace: ".jpg", "" %}
  {% assign img-name = img-name | replace: ".png", "" %}
  {% assign img-name = img-name | replace: include.path, "" %}
  {% assign img-name = img-name | replace: "/assets", "" %}
  {% assign img-name = img-name | replace: "Koeln", "Köln" %}

  <div class="swiper-slide">
    <img src="{{ site.baseurl }}{{ image.path }}" alt="{{ img-name }}" />
  </div>
  {% endif %}
  {% endfor %}

</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>

<script src=“cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js”>> <!– Initialize Swiper –> <script>

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

</script> {% endif %}