[tw5] LightBox Prototype (one Single Tiddler, no javascript, all TW + HTML + CSS )

Download the attached and drag into TiddlyWiki.com

There are two tiddlers, but you only need one of them:

  • LightBox tiddler (this is the only one you need)

  • Sample LightBox Setup (this one just to show how to use the LightBox tiddler
    To create a new LightBox:

  • create a new tiddler

  • add a filter transclusion in the text body as per the Sample LightBox Setup tiddler
    So a filter that looks like this: {{ [regexp[.jpg]sort[]] || LightBox}}

Give 'er a spin and let me know what you think.

SingleTiddlerLightBoxPrototype_byCharlie.json (2.9 KB)


Hi Charlie,

I have two doubts

  1. Is it possible to view the images only in the current tiddler using this lightbox. Images are using this format - [img[]]
  2. Also can we use some filters to view images (having [img[]] format )within tidlders with certain tags or fields?

Maybe. The amount of pain involved depends on what you mean by images in the current tiddler and how challenging it is to create a fitler to grab those pictures.

What I’ve built is based on each image being in a dedicated tiddler. As per my philosophy of componentization, I would not keep a bunch of images inside one tiddler: that does the opposite of facilitating reuse.

I think it would be helpful to see a tiddler that shows how you keep multple images in one tiddler.

1 Like


This is an example of how images are shown in my tiddlers, but usually my tiddlers won’t be this long…this one is long because it’s clipped from a web article. Once setup like a lightbox, I am thinking of clicking on one of the image within this tiddler which then get shown in a lightbox, then with further click on the arrow button, I will be able to see the rest of the images faster.

Yup, can be done. Requires some fancy filtering: grab all the content from the text field, filter out what is needed with some pretty fancy regexp work, and away you go.

You will have to get some help from somebody who knows regexp. I know regexp, but not yet well enough to do that quickly.

@arunnbabu81 showed a wiki …

My TiddlyWiki — a non-linear personal web notebook

This is an example of how images are shown in my tiddlers …

I found it interesting! Practical for purpose. (It is nice to see real usage!) …

Maybe it could also work with a carousel? (i.e. text above; slider below sequentially showing the images?)

Just a comment, TT