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
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!
I would welcome your customization, and would like to have your improvements on the above solutions!
There are rooms for improvements
Looks amazing so far!
Mohamad,
just looking now, that demo could use a splash screen, slow to load.
The feature would clearly be nice, and what you have quite effective. However I wonder if we could do it a tiddlywiki way, perhaps where the image popup is in a borderless modal, behind which we could place other features?
This is of course good enough.
I think it is possible! See the link to Tobias lightbox macro in first post! I think it can be customized to what you proposed also the solution by @JanJo uses the same technique you explained.
Very nice ! I also made one using modals some times ago :
Thanks ! I updated my code to change the cursor to a closing icon, a trick that I learned very recently. Maybe this can give you some ideas for your own version ?
Here’s the code :
cursor: url('data:image/svg+xml;utf-8,<svg width="36px" height="36px" version="1.1" viewBox="-3 -3 6 6" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="3" fill="black" opacity=".5"/><path d="M-1-1 1 1M-1 1 1-1" stroke="white" stroke-width=".5"/></svg>') 18 18, auto;
Cursor url should also support animations according to the spec but for now only chrome seems to support this feature 
(see this pen)
Ah, very nice pointer! Yes, specially for example 1 where by clicking the image, the window is closed!
Thank you!
Hi, @Mohammad , Can you put this plugin into your plugin library? I know it is not mature, but I think it already has enough features that convinced me to install it. I’d like to install it so I can view large images.
Oh, I see that are macros… Hope they can be a plugin so I can follow up your update in the future…
Hi @linonetwo
You can find it here: Lightbox Effects — lightbox in Tiddlywiki (tiddlyhost.com)
I have not wrap it into a plugin! It has only one macro and one stylesheet, actually I would add this later to Shiraz! but feel free to take it and include in your own collections/wikis.
I also wrap it into a small plugin if you prefer so!
Nice to add it to Shiraz!
The current version has some odd behavior. If you click the internal examples the window can be closed by a simple click (on the picture). After clicking once or twice on an external example all pictures (internally & externally) can only be closed via the cross button on the right top.
I also like the possibility that the images can be expanded to screen size as seen in the other two showcases by telumire and JanJo. The zoom option as seen in JanJo example is also a very nice addition.
Hi Joost,
It is by design!
There are two set of examples: set one closes image only by single click no close button!
Set two uses close button!
I noticed using the zoom effect in the light box actually effects the underlying wiki.
I think it would be useful to trap this so it only applies to the light box.
It uses anchor link so the wiki scroll up to the image!
I did understand that. I think you missed what I was trying to address. If you click once or twice on an image of set two, set one adopts the image behaviour of set two. So by doing that set one also gets the close button all of a sudden. Not a big deal, but likely not intended 
Hello @Mohammad
I like your lightbox examples and I also like the Shiraz flexigrid-image macro.
https://kookma-lightbox.tiddlyhost.com/##thumbnail-tagged%20images-8
https://kookma.github.io/TW-Shiraz/#examples%2Fadvanced%2Fflexgrid-gallery
I have a number of photos tagged as jpg and Spain, which have a caption field and original-date field. These are in a folder (wiki/files_photo/spain) alongside the wiki in folder (wiki)
A ViewTemplate displays the details including original-date and caption fields.
My problem is I would like to combine all three methods so as the “My Photos of Spain” tiddler shows the image caption and original-date below the image and when selected the lightbox shows the image as in your examples.
At present, the details are only shown when the individual tiddlers are selected/viewed.
Could you offer any help please
Thanks,
Scot
$ _user_flexigrid-image_macro.json (1.3 KB)
My Photos of Spain.json (183 Bytes)
$ _user_photo_ViewTemplate.json (436 Bytes)
Hi Scot,
If I summarize your problem, you like to have a central tiddler (my photos of spin) to show images using flexgrid, you also want to have caption and original date below each photo and on click have the lightbox effect!
Hello @Mohammad
Yes that is exactly what I would like.
“My Photos of Spain” should show both the caption and original-date at the bottom of the images. (As in the ViewTemplate for all Tiddlers tagged jpg).
I am just not sure how the filter should be written.
Scot
Assume you have all macros and stylesheet, the below macro shall be changed to show caption and original date
\define flexgrid-image4(filter)
<div class="flex-row">
<$list filter=<<__filter__>> counter=counter>
<div class="flex-col-4" style="min-height:180px">
<$macrocall $name=lbox img=<<currentTiddler>> id=counter/>
<$link to=<<currentTiddler>> >
<h3><<currentTiddler>></h3>
</$link>
{{!!caption}} - {{original-date}}
</div>
</$list>
</div>
\end
Note to the macrocall and lbox.