Spotlight: A Dream to Have a LightBox Gallery in Tiddlywiki

nextapps-de/spotlight: Web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. (github.com)

If I knew JS and if I knew how TW Core JS works, I would absolutely create a small plugin to integrate lightbox gallery in TiddlyWiki. It is a pity life is short and one can not find enough time to learn several programming languages!

See demo here: Spotlight.js – Modern HTML5 Image Gallery (nextapps-de.github.io)

2 Likes

References

I agree with you on that particular lightbox. It’s good. And I’m saying this as someone who has used good (expensive) commercial tools like Adobe Lightroom to make galleries.

One thing that would also be good is some JS in TW to be able to read meta-data (like EXIF data) from image files. Then they document themselves.

Well, we can dream? :smiley: .

Best wishes, TT

@Mohammad what is it that you perceive to be the fundamentals of a lightbox?

To me they just seem like a table of images you can click or hover to view larger versions. From this perspective the are not really a thing but a style, and can be constructed in many ways. In tiddlywiki we can even bring found html into tiddlers .

When I look at https://github.com/nextapps-de/spotlight a large amount of the features listed include things tiddlywiki is handling itself and we do not need to import in a lightbox solution.

There is a long history of displaying images, especially Photo galleries, so I would not be surprised if we can harvest prior art and build something suitable.

So I genuinely ask what do you fundamentally want in a lightbox?

Hi Tnoes,
If you look at the references, I have built already one! but to Spotlight is a real galley/slideshow maker.
If you use kookma library then Tamasha + https://kookma-lightbox.tiddlyhost.com/ gives you a slideshow+lightbox capability!

By the way Spotlight is a light (only 23kB) with no dependency and full featured lightbox tool.

Hello Mohammad,

I am still fairly new to TW, and I am not 100% sure I get your specific needs, but I think Reveal.js — Reveal.js presentations embedded in TiddlyWiki might give some of the functionality you are looking for. If I get it correctly you need a way to display images in a table (presumably chosen by filtering by tag), and then display a slideshow of images behind each clickable image - reveal.s could conceivably do the slideshow part, I think. The only issue I see is that I am not entirely sure if reveal.js can essentially automate the slideshow generation, but the section “Using tiddlers for slides” in the documentation on that pages makes me think it can.

I hope this helps,
Automeris

1 Like

There is a Reveal.js — Reveal.js presentations embedded in TiddlyWiki tiddlywiki already.

It’s interesting. … BUT as you mention time constrains are the problem.

Edit: Just for completeness. There’s a library that can extract exif info GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata

Thank you @Automeris.
Yes, Reveal.js can do this!

Tamasha from kookma library also can be used for slideshow.

Still I think Spotlight is a dedicated tool for lightbox gallery is a better one.

2 Likes

Is this something we could put up for a bit of cash for a dev on fission?

Do you mean TW open collective? TiddlyWikiDotOrg - Open Collective

I think it’s not specific to fission.

3 Likes

That’s the one @pmario! Though looking at it I think the answers probably no due to the scarcity of people :frowning: we don’t even cover this place. SIGN UP AND PUT SOME MONEY TO THIS AMAZING THING!!! :slight_smile:

I think it would be great if a tool was able to produce a lightbox-gallery from a folder.
It would be great if it was possible to have the url of the first picture and have the rest follow by title without having to setting up an order and if the lightbox was able to display metadata

Thinking about how to build this: This would imply having a php file in the background that would furnishing the information or show the picture and launch the gallery in a full-screen iframe.

Or could that be made with the functionalites of node.js ?!

I dunno. What I know is you can do it direct from TW IF it knows what to load.

In experiments where I had 1000 plus images under a folder sequentially numbered I could get TW stand-alone to load them. I used random numbers assigned to an actual img address.

Just a comment
TT

Right.

I asked a few times about this. There are a few JS libraries that can query an image for it’s meta-data. I just needs someone with the interest & the skill to implement it in TW.

I personally like using meta-data (like EXIF) from img files as they can hold their own documentation without need to create extra tiddlers to do so.
It is particularly useful for larger galleries.

Just a comment
TT

How to do this…is there any old discussion regarding this or any documentation available for reading?

Regarding getting workable random numbers within a range this is still useful … https://groups.google.com/g/tiddlywiki/c/N263pebgCYI/m/W0qL_wwsAwAJ

Hi @Mohammad, working on a lightbox is actually pretty high on my list of things that I need for my own TW apps. I am hoping to find the time for it later this summer and will keep you posted once I do work on it.

A lightbox is actually a lot more work with a lot of details to consider than is apparent at first, which is why I have decided against a custom JS or wikitext approach. However, the challenge then is to find a library that actually meets all of my criteria and would integrate well with TW. The one you linked is one of many that I have bookmarked for review when I get the opportunity.

1 Like

The approach both TiddlyWiki on Fission and my own WebDAV work takes is to have an action that makes an HTTP request to the server to get a list of images. This is saved as tiddler(s) and then creating a gallery is just wikitext based on those tiddler(s). If using PHP, you would need a script that when queried via HTTP returns a list of image filepaths in the folder.

1 Like