Added initial version.

css/002-big-image.css

@@ -0,0 +1,9 @@
+.big-image picture, .big-image img {
+    height: auto;
+    min-height: 100%;
+    min-width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}

css/003-gallery.css

@@ -0,0 +1,28 @@
+.gallery-images {
+    display: none;
+}
+
+@media only screen and (min-width: 1280px) {
+    .gallery-images {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        height: 120px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        z-index: 10;
+    }
+
+    .gallery-images picture, .gallery-images img {
+        height: inherit;
+        margin: 0 1em;
+    }
+
+    .gallery-images picture:hover {
+        cursor: pointer;
+    }
+}

js/002-swap-pictures.js

@@ -0,0 +1,17 @@
+function swapPicture() {
+    let bigImage = self.querySelector('.big-image picture');
+    // insert the big image before the one clicked on
+    this.parentNode.insertBefore(bigImage, this);
+    // move the clicked image to the big image container
+    self.querySelector('.big-image').appendChild(this);
+    // swap event listeners
+    this.removeEventListener('click', swapPicture);
+    bigImage.addEventListener('click', swapPicture);
+
+}
+
+self.querySelectorAll('.gallery-images picture')
+    .forEach((item, index) => {
+        item.addEventListener('click', swapPicture);
+    }
+);

module.php

@@ -0,0 +1,124 @@
+<?php
+
+use Lewp\FileHierarchy;
+use Lewp\Resolve;
+use Lewp\RwdPicture;
+
+return new class extends Lewp\Module
+{
+
+    const KEY_START_LANDSCAPE_ID = "start_landscape_id";
+    const KEY_START_PORTRAIT_ID = "start_portrait_id";
+    const KEY_START_MODULE_ID = "start_module_id";
+    const KEY_GALLERY_FOLDER_ID = "gallery_folder_id";
+
+    private function createBigImageContainer()
+    {
+        return $this->createAndSetupElement(
+            'div',
+            '',
+            [
+                'class' => 'big-image'
+            ]
+        );
+    }
+
+    private function createBigImage(
+        string $landscape_id,
+        string $portrait_id,
+        string $module_id
+    ) {
+        $rwd = new RwdPicture($landscape_id, $portrait_id, $module_id);
+        return $this->importNode($rwd->getPictureTag(), true);
+    }
+
+    private function bigImageAvailable(array $options) : bool
+    {
+        $retval = true;
+        if (!isset($options[self::KEY_START_LANDSCAPE_ID])) {
+            $retval = false;
+        }
+        if (!isset($options[self::KEY_START_PORTRAIT_ID])) {
+            $retval = false;
+        }
+        if (!isset($options[self::KEY_START_MODULE_ID])) {
+            $retval = false;
+        }
+        return $retval;
+    }
+
+    private function galleryAvailable(array $options) : bool
+    {
+        $retval = true;
+        if (!isset($options[self::KEY_GALLERY_FOLDER_ID])) {
+            $retval = false;
+        }
+        return $retval;
+    }
+
+    private function createGallery(array $options)
+    {
+        $div = $this->createAndSetupElement(
+            'div',
+            '',
+            [
+                'class' => 'gallery-images'
+            ]
+        );
+
+        // get all filenames
+        $folderpaths = $this->findFolderPaths('res-images');
+        for ($i = 0; $i < sizeof($folderpaths); ++$i) {
+            if ($folderpaths[$i] === false) {
+                continue;
+            }
+            // folder path of gallery
+            $gallery_folder = Resolve::toFilepath([
+                $folderpaths[$i],
+                $options[self::KEY_GALLERY_FOLDER_ID]
+            ]);
+            // all images in the folder
+            $gallery_filenames = scandir($gallery_folder);
+            foreach ($gallery_filenames as $image) {
+                if ($image === '..' || $image === '.') {
+                    continue;
+                }
+                $landscape =
+                    $options[self::KEY_GALLERY_FOLDER_ID]
+                    .Resolve::ID_SEPARATOR
+                    .$image;
+                $rwd = new RwdPicture(
+                    $landscape,
+                    $landscape,
+                    $this->getModuleId()
+                );
+                $div->appendChild(
+                    $this->importNode($rwd->getPictureTag(), true)
+                );
+            }
+            break; // the loop should only run one time to the end
+        }
+
+        return $div;
+
+    }
+
+    public function run(array $options = []) : bool
+    {
+        $big_image_container = $this->createBigImageContainer();
+        if ($this->bigImageAvailable($options)) {
+            $big_image = $this->createBigImage(
+                $options[self::KEY_START_LANDSCAPE_ID],
+                $options[self::KEY_START_PORTRAIT_ID],
+                $options[self::KEY_START_MODULE_ID]
+            );
+            $big_image_container->appendChild($big_image);
+        }
+        $this->appendChild($big_image_container);
+        if ($this->galleryAvailable($options)) {
+            $gallery = $this->createGallery($options);
+            $this->appendChild($gallery);
+        }
+        return true;
+    }
+};