Full-screen image modals

[JenniferS]

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.

[Mohammad]

You may also like to see

How to Create a Simple Lightbox Effect in Tiddlywiki

Announcement Lightbox Effect in Tiddlywiki 5.2.0 https://kookma-lightbox.tiddlyhost.com/ is a new Tiddlywiki implements two lightbox macros in a very simple way! Thank you to Anchor Links using HTML Two solutions have been implemented! There are two macros lbox and lbox2 Examples are provided. You can experiment and see how lightbox works both for imbedded and external images! Please send your feedback here!

[atronoush]

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.