Spotlight: A Dream to Have a LightBox Gallery in Tiddlywiki

,
#28

From an end-user point of view it might seem that way, but from an implementation point of view reading and display the metadata are two completely different things.

A lightbox can make use of and display any data that is available. The issue of having access to image EXIF data in TW is completely distinct from implementing a lightbox, and should also be implemented separately as a re-usable component. It also requires further in depth discussion as to what the usage patterns and needs might be, which would be facilitated by a separate dedicated thread. This would also make it more likely to attract the interest of someone that may implement it.

The suggestion for a separate thread is meant just as much to further your goals and needs, as to not clutter this one with details that are not directly pertinent to the implementation of a lightbox. I will leave it for you to decide whether you find value in that.

#29

Right. Understood.

TBH, it is a conundrum. I highly appreciate what you do. And I also see the conundrum of open source, free. A legacy of maintenance no one pays you for.

Though this post should maybe split to the Café? :slight_smile:

TT, x

#30

I will shut-up on this thread now as I certainly don’t want to spoil it.

TT

#31

Sorry for having brought up this metadata thing :wink:
Thanks for the quick exif-experiment @saqimtiaz !
I thought the description (which is in fact an IPTC-feature) could help building a lean and dynamic gallery which from a folder.
Another idea could be a combination of geoloc-data with the leaflet plugin.

#32

A post was merged into an existing topic: Custom application for TiddlyWiki based on WebDAV

#33

@Mohammad here is a very very quick proof of concept of integrating Spotlight into TW: Spotlight — proof of concept

I only had under a half hour to kill between meetings so please do not expect too much!

I do not believe that Spotlight lets you do inline sliders, which would be nice to have for my intended use case.

We may also need to disambiguate the functionality of a lightbox versus that of a creating a masonry or tiled view of images, to facilitate discussion. The description of Spotlight as a “lightbox gallery” is potentially misleading.

5 Likes
#34

Slightly off-topic,
They your photos Saq? They are good!

#35

All photos used for the demo are from https://unsplash.com/
Somehow using my own work feels inappropriate.

1 Like
#36

I kinda understand that. But it is always interesting to me to see a “corpus” of work.

I do work with “would-be” photographers. It always amazes me how good they are without knowing it!

A comment
TT

#37

This “felt issue” could be whole wiki in itself. :slight_smile:

I still find the net somewhat “down” on the visual.
The vast scale of “home(y) photos” is barely touched, yet images are a language.
Often a very good one.

Just a comment
TT

1 Like
#38

It could be very interesting to see if we can apply a Cartier-Bresson test to images in TW.

Bresson pioneered the idea of “The Decisive Moment” on hover on shutter-click.
Twinned with concepts of the “Golden Ratio”

Is this off topic?
Probably not.

TT

1 Like
#39

WOW! Thank you @saqimtiaz
Very intresting! I know this is only a proof of concept, so I will wait for an alpha release to give my comments! But this even in this stage is really cool!

Thank you!

1 Like
#40

This is my example

<$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
"""
first_img = {{{ [enlist<imgs>first[]] }}}
>
<$button class="tc-btn-invisible"> <$image source=<<first_img>> />
<$action-spotlight
	images=<<imgs>>
	start=<<first_img>>
/>
</$button>
</$let>
1 Like
#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.