BaguetteBox for Easy Lightbox Effect (Image and Image Gallery)

#1

:zap: Simple and easy to use lightbox script written in pure JavaScript

The baguetteBox is a minimal library of pure JavaScript. In minified form it is 3.5kB CSS + 9.5kB JS and so it is light for Tiddlywiki!

Its it worth to be included as a plugin?

I am asking Javascript people to have a look and see how we can make a plugin and include it in Tiddlywiki!

Something like:

<$baguettebox filter="image filter"  params=... />

See demo here: baguetteBox.js | Demo

Ref: How to Create a Simple Lightbox Effect in Tiddlywiki

3 Likes
Spotlight: A Dream to Have a LightBox Gallery in Tiddlywiki
#2

Hi Mohammad,
what params does it require: all image urls or just the folder url. It would be interesting if it could display all images in a folder even if they were unknown to the tw-instance. My way to solve this would be Iframe and … php because i am still unfamiliar with node.js.
Jan

#3

Jan,

  • Assume you have each image as a tiddler (external images through canonical_uri)
  • You can filter images say filter="[tag[480x320]]" to create gallery
  • Params can be like animation=... , class=..., … any customization can be sent to widget!
  • Widget can accept filter to list direct url to image (this is simple, you can store addresses in a dataTiddler or in some other places…)
#4

A lightbox style implementation for presenting images has been on my to do list for a long time. However my instinct is to create a native solution rather than integrate a third party library - unless I can find one that perfectly meets my requirements.

I keep delaying working on this because there is actually a lot of complexity to it and I have never have a large enough chunk of time to devote to it. For instance it isn’t clear if this library - which I have saved amongst many other lightbox implementatons in my Github stars - supports:

  • image pre-loading on demand. That is, don’t load all the images in advance but do load the next and previous
  • mixing different aspect ratios of images and resizing them for best fit
  • it does have support for responsive images but I want to add native support for this in TW
  • the ability to use the same mechanism for an inline slider of images, that is not in a lightbox

None of this is meant as criticism of the library you mentioned, rather just meant to illustrate some of the complexity involved.

The last time I worked on this - which I believe was last summer - I got as far as handling different aspect ratios in a complete wikitext implementation which relies on this tiny library from Streams for swipe support. The user experience was decent but cross browser CSS needed work. Since then I have had ideas for how we might possibly even avoid that need to resort to JavaScript, but alas simply no time to revisit that work.

I do hope to make more time to work on my own projects in the coming year, rather than devoting the entirety of my TW time to work on the core. So with any luck I will get back to this in the near future.

1 Like
#5

The way I would approach this is a startup action in TW that sends a requests to the server for a list of images and then saves that. On the server you could have a php script that responds to the request and returns a list of image URLs. This is the same technique that my WebDAV wikifarm uses.

2 Likes
#6

@saqimtiaz
is there any online version of webdav wikifarm to download and experiment?
I saw the videos, very intresting!

#7

Hi Saq, I agree with Mohammad, your webDAV demo looks really amazing.
The gallery looks far cooler than pintrest.

I would really like to have something like that running on a server because I begin to feel my php setup is a little oldschool.

#8

@saqimtiaz I know this is a different subject but since you are talking on multi-user setup in the video:
Do you think you could produce and manage a sort of multiuser-stream with that setting?
That would be incredibly usefull for educational use.

1 Like
#9

@Mohammad no there is no public demo or code available. As mentioned in that write up, I am very unlikely to publish any of that setup due to a lack of opportunity.

@JanJo the interesting thing is that you could do most of this with a php backend as well, but yes someone would need to write that backend. It may be simpler to just use WebDAV directly.

Regarding multi-user streams, sadly not. You would run into the same problem with users overwriting each others work and merge conflicts, unless you accept that only one person can edit a wiki at once. That is what the lock mechanism mentioned in the video enforces. If a second user opens the wiki while it is being edited, they get a read only wiki.

For multi-user wikis, the work that @joshuafontany is doing is very exciting. We were able to use Streams simultaneously to add nodes to the same tiddler and it all synchronized without any issues.

5 Likes
#10

I think it is very interesting. A few comments …

1 - I tested on phone and it works too! Robustness cross-platform really matters for this kind of app so its neat it seems to work well!

2 - Longer term it might be interesting to allow for “Captions”. For instance if you showing art works it is good to be able to show (via overlay) the Title, Year, and Medium (e.g. “acrylic on canvas”) as an optional element.

3 - You, yourself, mention potential for activation from a “gallery” (i.e. a matrix of image thumbnails) . IMO that would allow much wider usages I think?

4 - Regarding navigation of galleries there is a convention (quite a good one) of left and right arrows (on hover) for step-forward and step-back.

These are just thoughts! Basically, visually, it seems much in the right direction. :raised_hand:

Best wishes
TT

1 Like
#11

Thank you @TiddlyTweeter !

I am working on Lightbox and Overlay and I hope I can share a better version of the work soon!

4 Likes