How to Create a Simple Lightbox Effect in Tiddlywiki

One of the beautiful lightbox tool is the one by the great Tobias Beer in Tiddlywiki 5.1.5!
With a lot of new features in Tiddlywiki, I am looking for simple and efficient solution to have the lightbox effect in Tiddlywiki!

Any idea/solution/resource?

See also: BaguetteBox for Easy Lightbox Effect (Image and Image Gallery)

Ciao Mohammad

I think you need give a link to Tobias to better know what you are wanting to investigate.

Just a comment
TT

1 Like

I made a an image-macro which calls an enlarging Blackbox-modal as standard Image viewer in
wrappit — for the wrappit-tool.

wrappit —.

Best wishes Jan

1 Like

Thanks Jan!
It seems you use the TW modal window, am I right!

@TiddlyTweeter - Please see the link to Tobias lightbox! See my first post in this thread!

1 Like

Yes, this seemed most practical - though aestetically a different animation of jumping into the Lightbox could be better.

1 Like

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

  • Two solutions have been implemented!
  • There are two macros 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!

3 Likes

I would welcome your customization, and would like to have your improvements on the above solutions!

There are rooms for improvements

  1. better css
  2. use of better animation effects
  3. prevent the address bar from updating
  4. zoom effects on images
  5. scrollbars for large image (now, the max width and height has been set)
  6. creating image gallery
  7. and much more …
1 Like

Looks amazing so far!

1 Like

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.

2 Likes

Very nice ! I also made one using modals some times ago :

https://Telumire.github.io/TiddlyTweaks/index.html#:[[$:/Lightbox]][[$:/Lightbox/demo]][[$:/Lightbox/style]][[$:/Lightbox/macro]]

3 Likes

Hi @telumire
Thank you for sharing! Modal is more TW way to do lightbox!

1 Like

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 :confused: (see this pen)

1 Like

Ah, very nice pointer! Yes, specially for example 1 where by clicking the image, the window is closed!
Thank you!

1 Like