Spotlight: A Dream to Have a LightBox Gallery in Tiddlywiki

,
#41

This is how you would try to use it in a gallery view of images:


<$let imgs="""
https://nextapps-de.github.io/spotlight/demo/gallery/brooklyn-bridge-1791001.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/california-1751455.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/canada-2340312.jpg
"""
>
<$list filter="[enlist<imgs>]" variable="img">
<$button class="tc-btn-invisible" tag="div" actions="""
<$action-spotlight
	images=<<imgs>>
	start=<<img>>
/>""">
<$image source=<<img>> />
</$button>
</$list>
</$let>
3 Likes
#42

This is absolutely amazing! One can use CSS to style and customize the gallery!
Just one question: In Spotlight.js – Modern HTML5 Image Gallery
on click the image covers the full screen, in TW-Spotlight it doesnot!
Clicking the maximize button makes image to cover the full screen, then on navigation to next image again you have to click the maximize button, it does not keep the state.

#43

Further note:
The Spotlight — proof of concept plugin is just 60kB which is pretty light.

Thank you Saq.

1 Like
#44

At present, no additional spotlight options are supported and the zoom/fullscreen behaviour is one of them. There are both global options for a lightbox, as well as the option to customize them for individual slides. How to make it possible to specify all of them via wikitext when invoking the lightbox is an interesting UX challenge.

If you play around with the section at the bottom called API call, you will see all the available options in Spotlight and how they influence the lightbox: Spotlight.js – Modern HTML5 Image Gallery

2 Likes
#45

I found it interesting because of it’s minimalism.
For simple showing it is easy & effective …

Screenshot 2022-06-23 170005
Screenshot 2022-06-23 1700052728×1590 222 KB

Screenshot 2022-06-23 170444
Screenshot 2022-06-23 1704442720×1610 251 KB

Definitely a step in the right direction by @saqimtiaz! :slight_smile:

TT

#46

The gallery is beautifull. :sparkling_heart:
Three ideas for further development:

  • On smartphones pinch-zoom would be a big help
  • the $let contruction to get the image-url is great. It could be transcluded from a tiddler that is created via http-request to get all the images stored in a folder…which of course would require a small backend-php (or whatever…) on the server and only would work on that server.
  • can the gallery already show iptc descriptions if they are in the images?
#47

Hi @JanJo, what I am interested in is to re-use an existing lightbox library rather than having to create one from scratch. I do not want to customize the library to avoid the maintenance burden. So if we want more features, we either need to find a library that supports them or request them in that library.

So the answer to the pinch-zoom and IPTC question is, it depends on the underlying library. You can have a look at the documentation for it: https://github.com/nextapps-de/spotlight

For IPTC information, a more flexible approach would be to use a separate library that retrieves that information and then provide it to the lightbox as caption.

#48

I agree!

TBH, the ONLY thing I’d like added is ability to read & present meta-data.
Visually SPOTLIGHT is very neat & economical already.

Just a comment
TT

#49

One idea is to just use JSON passed to the widget to describe the structure and options for the lightbox, in other words what the library already supports. One could then use json filter operators to create a wikitext based UI that allows creating lightboxes, saving the configuration in a tiddler in the same JSON format expected by the spotlight library.

  • UI to configure your lightbox options (images, captions, other display options)
  • UI saves the config in JSON to a tiddler, for example MyLightBox
  • You invoke the lightbox with <$spotlight lightbox={{MyLightBox}}/>

This approach is particularly appealing because someone like our talented @Mohammad could help out with creating the wikitext based UI for creating and saving lightbox configurations. :wink:

2 Likes
#50

I would be happy to help! I think your plugin completed the most difficult part of the job! :grinning:
I am looking to find some free time and will go through it!

Side note: I am not sure the spotlight is the best library, but I very much like its simplicity. It is very small and work without any dependencies.

2 Likes
#51

This is another example: Gallery of images stored as tiddler

  1. Images are stored as tiddlers with canonical uri
  2. All images are from online image repo
  3. All images are tagged with img 
<$set name=imgs filter="[tag[img]]">

<$list filter="[enlist<imgs>]" variable="img">
<$button class="tc-btn-invisible" tag="div" actions="""
<$action-spotlight
	images=<<imgs>>
	start=<<img>>
/>""">
<$image source=<<img>> />
</$button>
</$list>
</$set>

To give a try

  1. download splotlight-demo3-images-with-uri.json (1.7 KB)

  2. drag and drop on Spotlight — proof of concept

  3. open Demo 3 and click on one of images

@saqimtiaz

  1. Is it possible to pass a filter to $action-spotlight e.g. images="[tag[img]]?
  2. This example can be served as Demo 3
2 Likes
#52

Thank you, I have added this to the demo.

It would be possible to add support for a filter attribute but at present I think it is better to focus on a user friendly affordance for specifying the other lightbox options. In the meantime, you could do something like this: images={{{ [tag[img]format:titlelist[]join[ ]] }}}

3 Likes
#53

@Mohammad I have pushed some quick updates and added additional demos:
https://saqimtiaz.github.io/sq-tw/spotlight/

The existing images and start attributes are renamed to $images and $start respectively, and it should be possible to pass other options to the spotlight library.

5 Likes
#54

@saqimtiaz
WOW, Thank you Saq. This is absolutely wonderful.
The Spotlight — proof of concept is a must have plugin now!

Question: Does using JSON means we can export a JSON list of images for online sources and use here in TW with spotlight?

Not a comment

  • need a changelog tiddler
#55

As long as it is in the correct format, yes. Example:

[
	{
		"src": "https://images.unsplash.com/photo-1655747508339-7cc94a19ac2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80",
		"title": "Parrot"
	},
	{
		"src": "https://images.unsplash.com/photo-1655747945989-e4db8f9bcbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80",
		"title": "Food"
	},
	{
		"src": "Brooklyn Bridge",
		"title": "Brooklyn Bridge"
	}	
]

I am not too concerned about having a changelog tiddler while this plugin is still a proof of concept. However, some assistance with creating documentation would be very welcome.

1 Like
#56

Sure, I am glad to help!

2 Likes
#57

Very nice! I did quick tests and it worked well for me on Windows desktop & tablet.

I do think it needs a bit more documentation for solid use.
I see @Mohammad may do that?
Overall it eases image galleries in TW!!

Tx, TT

1 Like
#58

I have always wanted to make a gallery. I recently looked at spotlight again. It is really simple. The simplest way is to add a spotlight class. The user does not need to care about any code. The URL of the image uses the x-tiddler-dictionary of tiddlywiki. I encapsulated it as a gallery widget. gallery example site

3 Likes