Export module for a website gallery with selected images

This export module should replace the PhotoSwipe copy in darktable.

See https://github.com/darktable-org/darktable/issues/16205 for more
details.

contrib/website_gallery_export.lua

@@ -0,0 +1,262 @@
+--[[Export module to create a web gallery from selected images
+
+  copyright (c) 2025 Tino Mettler
+
+  darktable is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  darktable is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this software.  If not, see <http://www.gnu.org/licenses/>.
+]]
+
+--[[
+   TODO:
+   - before PR: Zoom, export code from wpferguson, use share_dir
+   - Lua: remove images dir if already existent
+   - Lua: implement "supported" callback to limit export to suited file formats
+   - Lua: translations
+]]
+
+local dt = require "darktable"
+local df = require "lib/dtutils.file"
+
+local temp = dt.preferences.read('web_gallery', 'title', 'string')
+if temp == nil then temp = 'Darktable gallery' end
+
+local title_widget = dt.new_widget("entry")
+{
+   text = temp
+}
+
+local temp = dt.preferences.read('web_gallery', 'destination_dir', 'string')
+if temp == nil then temp = '' end
+
+local dest_dir_widget = dt.new_widget("file_chooser_button")
+{
+   title = "select output folder",
+   tooltip = "select output folder",
+   value = temp,
+   is_directory = true,
+   changed_callback = function(this) dt.preferences.write('web_gallery', 'destination_dir', 'string', this.value) end
+}
+
+local gallery_widget = dt.new_widget("box")
+{
+    orientation=vertical,
+    dt.new_widget("label"){label = "gallery title"},
+    title_widget,
+    dt.new_widget("label"){label = "destination directory"},
+    dest_dir_widget
+}
+
+local function get_file_name(file)
+    return file:match("[^/]*.$")
+end
+
+function escape_js_string(str)
+  local replacements = {
+    ['\\'] = '\\\\',
+    ['"']  = '\\"',
+    ["'"]  = "\\'",
+    ['\n'] = '\\n',
+    ['\r'] = '\\r',
+    ['\t'] = '\\t',
+    ['\b'] = '\\b',
+    ['\f'] = '\\f',
+    ['\v'] = '\\v'
+  }
+  return (str:gsub('[\\\"\n\r\t\b\f\v\']', replacements))
+end
+
+local function export_thumbnail(image, filename)
+    dt.print("export thumbnail image "..filename)
+    exporter = dt.new_format("jpeg")
+    exporter.quality = 90
+    exporter.max_height = 512
+    exporter.max_width = 512
+    exporter:write_image(image, filename, true)
+end
+
+local function write_image(image, dest_dir, filename)
+    df.file_move(filename, dest_dir.."/"..get_file_name(filename))
+    export_thumbnail(image, dest_dir.."/thumb_"..get_file_name(filename))
+end
+
+function exiftool_get_image_dimensions(filename)
+    local handle = io.popen("exiftool " .. filename)
+    local result = handle:read("*a")
+    handle:close()
+    for line in result:gmatch("[^\r\n]+") do
+        local w = line:match("^Image Width%s*:%s*(%d+)")
+        if w then
+            width = tonumber(w)
+        end
+        local h = line:match("^Image Height%s*:%s*(%d+)")
+        if h then
+            height = tonumber(h)
+        end
+    end
+    if width and height then
+        return width, height
+    else
+        return nil, nil
+    end
+end
+
+local function fill_gallery_table(images_ordered, images_table, title, dest_dir, sizes, exiftool)
+    dest_dir = dest_dir.."/images"
+    local gallery_data = { name = escape_js_string(title) }
+
+    local images = {}
+    local index = 1
+    for i, image in pairs(images_ordered) do
+        local filename = images_table[image]
+        write_image(image, dest_dir, filename)
+
+        if exiftool then
+            width, height = exiftool_get_image_dimensions(dest_dir.."/"..get_file_name(filename))
+        else
+            width = sizes[index].width
+            height = sizes[index].height
+        end
+
+        local entry = { filename = "images/"..get_file_name(escape_js_string(filename)),
+                        width = width, height = height }
+
+        images[index] = entry
+        index = index + 1
+    end
+
+    gallery_data.images = images
+    return gallery_data
+end
+
+local function generate_javascript_gallery_object(gallery)
+    local js = 'const gallery_data = {\n'
+    js = js .. '  name: "' .. gallery.name .. '",\n'
+    js = js .. '  images: [\n'
+
+    for i, img in ipairs(gallery.images) do
+        js = js .. string.format('    { filename: "%s",\n      height: %d,\n      width: %d }', img.filename, img.height, img.width)
+        if i < #gallery.images then
+            js = js .. ',\n'
+        else
+            js = js .. '\n'
+        end
+    end
+
+    js = js .. '  ]\n};\n'
+
+    return(js)
+end
+
+local function write_javascript_file(gallery_table, dest_dir)
+    dt.print("write JavaScript file")
+    javascript_object = generate_javascript_gallery_object(gallery_table)
+
+    local fileOut, errr = io.open(dest_dir.."/images.js", 'w+')
+    if fileOut then
+        fileOut:write(javascript_object)
+    else
+        log.msg(log.error, errr)
+    end
+    fileOut:close()
+end
+
+local function copy_static_files(dest_dir)
+    dt.print("copy static gallery files")
+    gfsrc = dt.configuration.config_dir.."/lua/data/website_gallery"
+    gfiles = {
+        "index.html",
+        "gallery.css",
+        "modal.css",
+	"modal.js",
+        "gallery.js",
+        "fullscreen.js"
+    }
+
+    for _, file in ipairs(gfiles) do
+        df.file_copy(gfsrc.."/"..file, dest_dir.."/"..file)
+    end
+end
+
+local function build_gallery(storage, images_table, extra_data)
+    local dest_dir = dest_dir_widget.value
+    df.mkdir(dest_dir)
+    df.mkdir(dest_dir.."/images")
+
+    local images_ordered = extra_data["images"] -- process images in the correct order
+    local sizes = extra_data["sizes"]
+    local title = "Darktable export"
+    if title_widget.text ~= "" then
+        title = title_widget.text
+    end
+    local exiftool = df.check_if_bin_exists("exiftool");
+    gallerydata = fill_gallery_table(images_ordered, images_table, title, dest_dir, sizes, exiftool)
+    write_javascript_file(gallerydata, dest_dir)
+    copy_static_files(dest_dir)
+end
+
+local script_data = {}
+
+script_data.metadata = {
+    name = "website gallery (new)",
+    purpose = "create a web gallery from exported images",
+    author = "Tino Mettler <tino+darktable@tikei.de>",
+    help = "https://docs.darktable.org/lua/stable/lua.scripts.manual/scripts/contrib/TODO"
+}
+
+script_data.destroy_method = nil -- set to hide for libs since we can't destroy them commpletely yet, otherwise leave as nil
+script_data.restart = nil -- how to restart the (lib) script after it's been hidden - i.e. make it visible again
+script_data.show = nil -- only required for libs since the destroy_method only hides them
+
+local function destroy()
+    dt.preferences.write('web_gallery', 'title', 'string', title_widget.text)
+    dt.destroy_storage("module_webgallery")
+end
+script_data.destroy = destroy
+
+local function show_status(storage, image, format, filename,
+  number, total, high_quality, extra_data)
+    dt.print(string.format("export image %i/%i", number, total))
+    aspect = image.aspect_ratio
+    -- calculate the size of the exported image and store it in extra_data
+    -- to make it available in the finalize function
+    if image.final_height == 0 then
+        if aspect < 1 then
+            dimensions = { width = image.height, height = image.width }
+        else
+            dimensions = { width = image.width, height = image.height }
+        end
+    else
+        dimensions = { width = image.final_width, height = image.final_height }
+    end
+    if format.max_height > 0 and dimensions.height > format.max_height then
+        scale = format.max_height / dimensions.height
+        dimensions.height = math.floor(dimensions.height * scale + 0.5)
+        dimensions.width = math.floor(dimensions.width * scale + 0.5)
+    end
+    if format.max_width > 0 and dimensions.width > format.max_width then
+        scale = format.max_width / dimensions.width
+        dimensions.height = math.floor(dimensions.height * scale + 0.5)
+        dimensions.width = math.floor(dimensions.width * scale + 0.5)
+    end
+    extra_data["sizes"][number] = dimensions
+end
+
+local function initialize(storage, img_format, images, high_quality, extra_data)
+    dt.preferences.write('web_gallery', 'title', 'string', title_widget.text)
+    extra_data["images"] = images -- needed, to preserve images order
+    extra_data["sizes"] = {};
+end
+
+dt.register_storage("module_webgallery", "website gallery (new)", show_status, build_gallery, nil, initialize, gallery_widget)
+
+return script_data

data/website_gallery/fullscreen.js

@@ -0,0 +1,40 @@
+var isFullscreen = false;
+
+var toggleFullscreen = function (ele) {
+    return isFullscreen ? exitFullscreen(ele) : requestFullscreen(ele);
+};
+
+var requestFullscreen = function (ele) {
+    if(isFullscreen == true) return 0 ;
+    
+    isFullscreen = true;
+    if (ele.requestFullscreen) {
+	ele.requestFullscreen();
+    } else if (ele.webkitRequestFullscreen) {
+	ele.webkitRequestFullscreen();
+    } else if (ele.mozRequestFullScreen) {
+	ele.mozRequestFullScreen();
+    } else if (ele.msRequestFullscreen) {
+	ele.msRequestFullscreen();
+    } else {
+	console.log('Fullscreen API is not supported.');
+    }
+};
+
+var exitFullscreen = function () {
+    if(isFullscreen == false) return 0;
+    
+    isFullscreen = false;
+    if (document.exitFullscreen) {
+	document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+	document.webkitExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+	document.mozCancelFullScreen();
+    } else if (document.msExitFullscreen) {
+	document.msExitFullscreen();
+    } else {
+	console.log('Fullscreen API is not supported.');
+    }
+};
+

data/website_gallery/gallery.css

@@ -0,0 +1,113 @@
+/*
+    copyright (c) 2025 Tino Mettler
+
+    darktable is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    darktable is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this software.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+body {
+    font-family: system-ui, Arial, Helvetica, sans-serif;
+    background-color: rgb(238, 240, 242);
+}
+
+.heading h1 {
+    text-align: center;
+    background-color: #cdd;
+    color: black;
+    display: grid;
+}
+
+.heading h1:after {
+    content: " ";
+    border-bottom: 1px solid #888888;
+    height: 1px;
+}
+
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 3vw;
+    margin: 3vw auto;
+    padding: 1.5vw;
+}
+
+.slider {
+    margin: 0;
+    padding: 0;
+}
+
+
+.gallery img {
+    cursor: pointer;
+    object-fit: contain;
+    background: none;
+    padding: 0;
+    border: 1px outset #737780;
+
+}
+
+.gallery img:hover {
+    transform: scale(1.08);
+}
+
+.thumb {
+    object-fit: contain;
+    flex-shrink: 0;
+    min-width: 100%;
+    min-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.thumb-box {
+    display: flex;
+    align-items: center;
+    object-fit: contain;
+    justify-content: center;
+    background: none;
+    box-shadow: 0 1vw 4vw 1vw rgba(0,0,0,0.6);
+}
+
+.navgrid {
+  font-size: 3.5vh;
+  display: grid;
+  grid-template-columns: 4em 1fr 1.5em 1.5em 1fr 1.5em 1.5em;
+  grid-column-gap: 1vw;
+  background-color: black;
+}
+
+.nav {
+  height: 5vh;
+  background-color: rgba(60,60,60, 0.4);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  z-index: 1001;
+  color: #ccc;
+}
+
+.counter {
+    font-size: 2.5vh;
+}
+
+.button {
+  cursor: pointer;
+}
+
+.button:hover {
+  cursor: pointer;
+  color: white;
+  text-shadow: 0px 0px 10px #ccc;
+}

data/website_gallery/gallery.js

@@ -0,0 +1,113 @@
+/*
+    copyright (c) 2025 Tino Mettler
+
+    darktable is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    darktable is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this software.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+var scrollPosX = 0;
+var scrollPosY = 0;
+
+document.addEventListener('DOMContentLoaded', function () {
+    var imageCount = 0;
+    const gallery = document.getElementById('gallery');
+    const viewer = document.getElementById('viewer');
+
+    function showModal(e) {
+        const thumbbox = e.target.parentElement;
+        const index = [...gallery.children].indexOf(thumbbox);
+        currentIndex = index;
+        scrollPosX = document.documentElement.scrollLeft;
+        scrollPosY = document.documentElement.scrollTop;
+
+        gallery.style.display = 'none';
+        document.getElementById('heading1').style.display = 'none';
+        viewer.style.display = 'grid';
+        loadSlides();
+        updateCounter(currentIndex);
+        updateNavigationState();
+    }
+
+
+    function closeModal() {
+        exitFullscreen(document.documentElement);
+        viewer.style.display = 'none';
+        document.getElementById('heading1').style.display = 'grid';
+        gallery.style.display = 'flex';
+        document.documentElement.scrollTo({
+	    left: scrollPosX,
+            top: scrollPosY,
+            behavior: "instant",
+        });
+    };
+
+    function createThumbnailElement(imageObj) {
+        const frame = document.createElement('div');
+        frame.className = 'thumb-box';
+        const framesize = 18;
+
+        const width = parseInt(imageObj.width);
+        const height = parseInt(imageObj.height);
+        const aspect = height / width;
+        const sum = width + height;
+        const scalefactor = sum / (framesize * 2.0);
+        frame.style.width = (width / scalefactor) + 'vw';
+        frame.style.height = (height / scalefactor) + 'vw';
+
+        const img = document.createElement('img');
+        img.className = 'thumb';
+        img.src = imageObj.filename.replace(/images\/(.*)$/i, 'images/thumb_$1');
+        img.alt = imageObj.filename;
+        img.addEventListener('click', function (e) { e.stopPropagation(); showModal(e); });
+
+        frame.appendChild(img);
+        gallery.appendChild(frame);
+    }
+
+    const images = gallery_data.images;
+
+    const title = document.getElementById('gallery-title');
+    const pageTitle = document.getElementById('page-title');
+    if (gallery_data.name) {
+        title.textContent = gallery_data.name;
+        pageTitle.textContent = gallery_data.name;
+    }
+
+
+    document.getElementById('close').onclick = function (e) {
+        e.stopPropagation();
+        closeModal();
+    };
+
+    // Keyboard navigation using left/right arrow keys
+    document.onkeyup = function (e) {
+        e.stopPropagation();
+        switch(e.key) {
+        case "Escape":
+            closeModal();
+            break;
+        }
+    };
+
+    document.getElementById('fullscreen').onclick = function (e) {
+        e.stopPropagation();
+        toggleFullscreen(document.documentElement);
+    };
+
+    // Populate thumbnail gallery
+    images.forEach(function (imageObj) {
+        createThumbnailElement(imageObj);
+    });
+
+
+});

data/website_gallery/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+    <link rel="stylesheet" href="modal.css">
+    <link rel="stylesheet" href="gallery.css">
+    <title id="page-title">Image Gallery</title>
+
+
+</head>
+
+<body>
+    <div id="heading1" class="heading">
+        <h1 id="gallery-title">Image Gallery</h1>
+    </div>
+    <div id="gallery" class="gallery"></div>
+    <div class="viewer" id="viewer">
+        <div class="navgrid">
+            <div id="counter" class="nav"></div>
+            <div class="spacer"></div>
+            <div class="button nav nav-arrow" id="prevArrow">&#9664;</div>
+            <div class="button nav nav-arrow" id="nextArrow">&#9654;</div>
+            <div class="spacer"></div>
+            <div id="fullscreen" class="button nav">&#x26F6;</div>
+            <div id="close" class="nav button">&times;</div>
+        </div>
+        <div class="slider" id="slider1">
+            <div class="slide-container">
+                <div class="slide" id="prev"></div>
+                <div class="slide" id="current"></div>
+                <div class="slide" id="next"></div>
+            </div>
+        </div>
+    </div>
+    <script type='text/javascript' >
+        var currentIndex = 1;
+    </script>
+    <script src="images.js"></script>
+    <script src="fullscreen.js"></script>
+    <script src="modal.js"></script>
+    <script src="gallery.js"></script>
+</body>
+</html>

data/website_gallery/modal.css

@@ -0,0 +1,95 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    display: flex;
+    flex-direction: column;
+}
+
+.viewer {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    touch-action: none;
+    overflow: hidden;
+    display: none;
+}
+
+.slider {
+    position: relative;
+    width: 100vw;
+    height: 95vh;
+    touch-action: none;
+    overflow: hidden;
+}
+
+.slide-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300%;
+    height: 100%;
+    display: flex;
+    transform: translateX(-33.333%);
+    transition: transform 0.3s ease-out;
+    will-change: transform;
+}
+
+.slide {
+    width: 33.333%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+    will-change: contents;
+    overflow: hidden;
+    position: relative;
+    padding: 0;
+    margin: 0;
+    touch-action: none;
+    object-fit: contain;
+}
+
+.slide img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    display: block;
+    transform-origin: 0 0;
+    cursor: zoom-in;
+    object-fit: contain;
+}
+
+.slide.zoomed img {
+    cursor: zoom-out;
+    max-width: none;
+    max-height: none;
+}
+
+.slide img.zooming {
+    transition: transform 0.2s ease-out;
+}
+
+.nav-bar {
+    width: 100vw;
+    height: 5vh;
+    background: #333;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+}

data/website_gallery/modal.js

@@ -0,0 +1,409 @@
+
+// DOM Elements
+const container = document.querySelector('.slide-container');
+const slides = {
+    prev: document.getElementById('prev'),
+    current: document.getElementById('current'),
+    next: document.getElementById('next')
+};
+const prevArrow = document.getElementById('prevArrow');
+const nextArrow = document.getElementById('nextArrow');
+
+// State management
+let mouseTimer = null;
+let startX = 0;
+let startY = 0;
+let isDragging = false;
+let isZoomed = false;
+let isPanning = false;
+let hasPanned = false;
+let translateX = 0;
+let translateY = 0;
+let currentScale = 1;
+let minX = 0;
+let minY = 0;
+let containerRect, imgRect;
+let img;
+
+let baseWidth, baseHeight;  // Image dimensions before zoom
+let baseOffsetX, baseOffsetY;  // Image position offset before zoom (due to centering)
+
+let scaledWidth, scaledHeight;
+
+const images = gallery_data.images;
+
+function updateCounter(index) {
+    const counter = document.getElementById('counter');
+    counter.textContent = (index + 1) + ' / ' + images.length;
+}
+
+function updateBoundaries() {
+    containerRect = container.getBoundingClientRect();
+    // Calculate the actual scaled dimensions based on the base (pre-zoom) size
+    scaledWidth = baseWidth * currentScale;
+    scaledHeight = baseHeight * currentScale;
+    console.log('Boundaries:', {
+        containerRect,
+        scaledWidth,
+        scaledHeight,
+        baseWidth,
+        baseHeight,
+        currentScale
+    });
+}
+
+function limitPanning(proposedX, proposedY) {
+    // With transform-origin: 0 0 and transform: translate(tx, ty) scale(s)
+    //
+    // Before zoom:
+    // - Image element positioned at (baseOffsetX, baseOffsetY) in container
+    // - Image size is (baseWidth, baseHeight)
+    //
+    // After transform is applied:
+    // - First, scale happens around origin (0,0) of the element: element becomes (baseWidth*s, baseHeight*s)
+    // - Then translate by (tx, ty) moves the whole element
+    // - Final position in viewport: element's top-left is at (baseOffsetX + tx, baseOffsetY + ty)
+    // - Element's bottom-right is at (baseOffsetX + tx + scaledWidth, baseOffsetY + ty + scaledHeight)
+    //
+    // We want the image content edges to stay within the container while allowing original borders:
+    // - Left constraint: baseOffsetX + tx >= baseOffsetX  =>  tx >= 0
+    // - Right constraint: baseOffsetX + tx + scaledWidth <= containerWidth - (containerWidth - baseOffsetX - baseWidth)
+    //                     baseOffsetX + tx + scaledWidth <= baseOffsetX + baseWidth
+    //                     tx <= baseWidth - scaledWidth
+    // - Top constraint: baseOffsetY + ty >= baseOffsetY  =>  ty >= 0
+    // - Bottom constraint: baseOffsetY + ty + scaledHeight <= baseOffsetY + baseHeight
+    //                      ty <= baseHeight - scaledHeight
+
+    // Calculate limits
+    const maxX = 0;
+    const minX = baseWidth - scaledWidth;
+
+    const maxY = 0;
+    const minY = baseHeight - scaledHeight;
+
+    let constrainedX = proposedX;
+    let constrainedY = proposedY;
+
+    // Apply constraints
+    if (scaledWidth > baseWidth) {
+        // Image wider than original - constrain panning
+        constrainedX = Math.max(minX, Math.min(maxX, proposedX));
+    } else {
+        // Image narrower than original - center it
+        constrainedX = (baseWidth - scaledWidth) / 2;
+    }
+
+    if (scaledHeight > baseHeight) {
+        // Image taller than original - constrain panning
+        constrainedY = Math.max(minY, Math.min(maxY, proposedY));
+    } else {
+        // Image shorter than original - center it
+        constrainedY = (baseHeight - scaledHeight) / 2;
+    }
+
+    console.log('limitPanning:', {
+        proposed: { x: proposedX, y: proposedY },
+        constrained: { x: constrainedX, y: constrainedY },
+        limits: { minX, maxX, minY, maxY },
+        baseOffset: { x: baseOffsetX, y: baseOffsetY },
+        baseSize: { w: baseWidth, h: baseHeight },
+        scaledSize: { w: scaledWidth, h: scaledHeight }
+    });
+
+    return {
+        x: constrainedX,
+        y: constrainedY
+    };
+}
+
+function handleZoom(e) {
+    // If we were actually panning, don't zoom
+    if (hasPanned) {
+        isPanning = false;
+        hasPanned = false;
+        return;
+    }
+
+    // If we're zoomed and haven't panned, zoom out
+    if (isZoomed) {
+        img.classList.add('zooming');
+        translateX = 0;
+        translateY = 0;
+        currentScale = 1;
+        img.style.transform = 'none';
+        container.classList.remove('zoomed');
+        isZoomed = false;
+        updateNavigationState();
+
+        setTimeout(() => {
+            img.classList.remove('zooming');
+        }, 200);
+        return;
+    }
+
+    // Zoom in at clicked/tapped point
+    if (!isZoomed) {
+        const rect = img.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        // Store the base (pre-zoom) dimensions and offset
+        baseWidth = rect.width;
+        baseHeight = rect.height;
+        baseOffsetX = rect.left;
+        baseOffsetY = rect.top;
+
+        // Calculate the scale for 1:1 pixel zoom
+        currentScale = img.naturalWidth / rect.width;
+
+        // Calculate the translation needed to keep clicked point under cursor
+        // After scaling, the point at (x, y) will be at (x * currentScale, y * currentScale)
+        // We want it to remain at (e.clientX - rect.left, e.clientY - rect.top)
+        translateX = e.clientX - rect.left - (x * currentScale);
+        translateY = e.clientY - rect.top - (y * currentScale);
+
+        updateBoundaries();
+        const limited = limitPanning(translateX, translateY);
+        translateX = limited.x;
+        translateY = limited.y;
+
+        img.classList.add('zooming');
+        img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentScale})`;
+        container.classList.add('zoomed');
+
+        setTimeout(() => {
+            img.classList.remove('zooming');
+        }, 200);
+    }
+    isZoomed = true;
+    updateNavigationState();
+}
+
+function createImageElement(imageData) {
+    if (!imageData) return null;
+    const img = new Image();
+    img.src = imageData.filename;
+    img.width = imageData.width;
+    img.height = imageData.height;
+    img.addEventListener('dragstart', (e) => e.preventDefault());
+    return img;
+}
+
+function loadSlides() {
+    slides.prev.innerHTML = '';
+    slides.current.innerHTML = '';
+    slides.next.innerHTML = '';
+
+    if (currentIndex > 0) {
+        const prevImg = createImageElement(images[currentIndex - 1]);
+        if (prevImg) slides.prev.appendChild(prevImg);
+    }
+
+    const currentImg = createImageElement(images[currentIndex]);
+    if (currentImg) {
+        img = currentImg;
+        slides.current.appendChild(currentImg);
+    }
+
+    if (currentIndex < images.length - 1) {
+        const nextImg = createImageElement(images[currentIndex + 1]);
+        if (nextImg) slides.next.appendChild(nextImg);
+    }
+
+    updateCounter(currentIndex)
+    updateNavigationState();
+}
+
+function updateNavigationState() {
+    prevArrow.style.visibility = (currentIndex === 0 || isZoomed) ? 'hidden' : 'visible';
+    nextArrow.style.visibility = (currentIndex === images.length - 1 || isZoomed) ? 'hidden' : 'visible';
+}
+
+async function showPreviousImage() {
+    if (currentIndex > 0 && !isZoomed) {
+        currentIndex--;
+        container.style.transition = 'transform 0.3s ease-out';
+        container.style.transform = 'translateX(0%)';
+        await waitForTransition();
+        container.style.transition = 'none';
+        container.style.transform = 'translateX(-33.333%)';
+        loadSlides();
+    }
+}
+
+async function showNextImage() {
+    if (currentIndex < images.length - 1 && !isZoomed) {
+        currentIndex++;
+        container.style.transition = 'transform 0.3s ease-out';
+        container.style.transform = 'translateX(-66.666%)';
+        await waitForTransition();
+        container.style.transition = 'none';
+        container.style.transform = 'translateX(-33.333%)';
+        loadSlides();
+    }
+}
+
+function handleTouchStart(e) {
+    if (isZoomed) return;
+    startX = e.touches[0].clientX;
+    isDragging = true;
+    container.style.transition = 'none';
+}
+
+function handleTouchMove(e) {
+    if (!isDragging || isZoomed) return;
+
+    const currentX = e.touches[0].clientX;
+    const diff = currentX - startX;
+    const baseOffset = -33.333;
+    const percentMoved = (diff / window.innerWidth) * 33.333;
+
+    container.style.transform = `translateX(${baseOffset + percentMoved}%)`;
+}
+
+async function handleTouchEnd(e) {
+    if (!isDragging)
+        if(isZoomed) {
+            handleZoom(e);
+            return;
+        }
+    isDragging = false;
+
+    const endX = e.changedTouches[0].clientX;
+    const diff = endX - startX;
+    const threshold = window.innerWidth * 0.2;
+
+    container.style.transition = 'transform 0.3s ease-out';
+
+    if (diff > threshold && currentIndex > 0) {
+        await showPreviousImage();
+    } else if (diff < -threshold && currentIndex < images.length - 1) {
+        await showNextImage();
+    } else {
+        container.style.transform = 'translateX(-33.333%)';
+    }
+}
+
+function handleMouseMove() {
+    if (isZoomed) return;
+
+    prevArrow.classList.add('visible');
+    nextArrow.classList.add('visible');
+
+    if (mouseTimer) {
+        clearTimeout(mouseTimer);
+    }
+
+    mouseTimer = setTimeout(() => {
+        prevArrow.classList.remove('visible');
+        nextArrow.classList.remove('visible');
+    }, 1000);
+}
+
+function handleKeyDown(e) {
+    if (isZoomed) return;
+
+    if (e.code === 'Space' || e.code === 'ArrowRight') {
+        e.preventDefault();
+        showNextImage();
+    } else if (e.code === 'Backspace' || e.code === 'ArrowLeft') {
+        e.preventDefault();
+        showPreviousImage();
+    }
+}
+
+function waitForTransition() {
+    return new Promise(resolve => {
+        container.addEventListener('transitionend', resolve, { once: true });
+    });
+}
+
+// Initialize
+loadSlides();
+
+// Navigation event listeners
+container.addEventListener('touchstart', handleTouchStart);
+container.addEventListener('touchmove', handleTouchMove);
+container.addEventListener('touchend', handleTouchEnd);
+container.addEventListener('click', handleZoom);
+
+// make nav arrows visible
+document.addEventListener('mousemove', handleMouseMove);
+
+document.addEventListener('keydown', handleKeyDown);
+prevArrow.addEventListener('click', showPreviousImage);
+nextArrow.addEventListener('click', showNextImage);
+
+// Mouse panning event listeners
+container.addEventListener('mousedown', function(e) {
+    if (isZoomed && e.target.tagName === 'IMG') {
+        isPanning = true;
+        hasPanned = false;
+        updateBoundaries();
+        startX = e.clientX - translateX;
+        startY = e.clientY - translateY;
+        e.preventDefault();
+        container.style.cursor = 'grabbing';
+    }
+});
+
+window.addEventListener('mousemove', function(e) {
+    if (isPanning && isZoomed) {
+        const proposedX = e.clientX - startX;
+        const proposedY = e.clientY - startY;
+
+        const limited = limitPanning(proposedX, proposedY);
+        translateX = limited.x;
+        translateY = limited.y;
+
+        const img = slides.current.querySelector('img');
+        img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentScale})`;
+        hasPanned = true;
+    }
+});
+
+window.addEventListener('mouseup', function() {
+    if (isPanning) {
+        isPanning = false;
+        container.style.cursor = isZoomed ? 'zoom-out' : 'zoom-in';
+    }
+});
+
+// Touch panning event listeners
+container.addEventListener('touchstart', function(e) {
+    if (isZoomed) {
+        isPanning = true;
+        hasPanned = false;
+        updateBoundaries();
+        const touch = e.touches[0];
+        startX = touch.clientX - translateX;
+        startY = touch.clientY - translateY;
+        e.preventDefault();
+    }
+});
+
+container.addEventListener('touchmove', function(e) {
+    if (isPanning && isZoomed) {
+        const touch = e.touches[0];
+        const proposedX = touch.clientX - startX;
+        const proposedY = touch.clientY - startY;
+
+        const limited = limitPanning(proposedX, proposedY);
+        translateX = limited.x;
+        translateY = limited.y;
+
+        const img = slides.current.querySelector('img');
+        img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentScale})`;
+        hasPanned = true;
+        e.preventDefault();
+    }
+});
+
+container.addEventListener('touchend', function(e) {
+    if (isPanning) {
+        isPanning = false;
+        if (!hasPanned) {
+            handleZoomTap(e.changedTouches[0]);
+        }
+    }
+});