figureSwipe - A Zoom for Images

The plugin allows you to zoom in the figures in the page and show them one after other like photo gallery. The text from the attribute alt of the figure is shown below or aside the picture.

• Based on PhotoSwipe and photoswipe-dynamic-caption-plugin
• (c) 2024 Josef Pavlik source on github
• License: MIT

Zoom and Swipe Images in Frontend

This is an example page of the Typemill documentation. The first image is large, so it's zoomed out, it's not possible to read the text on the image.

Clicking on the figure, it zooms in and shows it on full page of browser. If the resolution of the image is larger than the window of browser, the second click zooms it to full resolution and it's possible to pan the image.

Navigating on left or right arrow or swiping left and right you can show another figures of the page.

Installation

Download the zip or clone the repository to your plugins directory of Typemill

cd <path_to_typemill>/plugins
git clone https://github.com/josefpavlik/typemill-plugin-figureswipe.git figureSwipe
cd figureSwipe
./prepare_libs

Typemill older than V2.13 needs a patch

Typemill before V2.13 needs a small patch to work with this plugin. Please update typemill to version 2.13 or above. If you want to use older versions of Typmill, you should apply the patch typemill.patch.

patch << typemill.patch

Activate the plugin

Go to the System page and select the Plugin on the left menu Search for the figureSwipe plugin and enable it

That's all.

Insert a large image to page

The images must be inserted with full resolution (original size). The resolution of the image must be declared in attributes.

Click on the Image icon of the command bar

Drag image to the page or select an image from the media library.

The width and height are precompiled to fixed (smaller values) by default (live version).

Now use the button "switch quality" and switch to the original-version of the image ( media/original/...). The width and height will be compiled with real size of the image.

If you want, compile the Caption (for the listing) and the Alt-text attribute for the text in zoom-in mode

Click on "save".