Full-screen image modals

Hi. I used the solution from this thread for a simple full-screen image modal routine. I use it for images associated with my tiddlers via URLs in an image field.

<$button message="tm-modal" param="ModalImage" set="$:/state/currentImage" setTo=
{{!!illustration}} class='tc-btn-invisible'>

<$image class='titlethumb' source={{!!illustration}} />

</$button>

Here’s the tiddler ModalImage.json (240 Bytes) that shows the “dynamic” image, and the related CSS (1.5 KB).

The CSS is namespaced to a “fullsize” class which is added to the modal via a class field on the dynamic image tiddler.

2 Likes

You may also like to see

2 Likes

I use Spotlight from
Saq’s Sandbox — Experimental doodads (saqimtiaz.github.io)

It is among the best lighbox tools in Tiddlywiki! I can use it for single image or all images in my tiddler, so to have a gallery! Note: for gallery I do it manually.

1 Like