How to Create a Simple Lightbox Effect in Tiddlywiki

1

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)

2

Ciao Mohammad

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

Just a comment
TT

3

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

4

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

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

5

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

6

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!

7

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 …
8

Looks amazing so far!

9

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.

10

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.

11

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]]

12

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

13

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)

14

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

15

Hi, @Mohammad , Can you put this plugin into your plugin library? I know it is not mature, but I think it already has enough features that convinced me to install it. I’d like to install it so I can view large images.

Oh, I see that are macros… Hope they can be a plugin so I can follow up your update in the future…

16

Hi @linonetwo
You can find it here: Lightbox Effects — lightbox in Tiddlywiki (tiddlyhost.com)

I have not wrap it into a plugin! It has only one macro and one stylesheet, actually I would add this later to Shiraz! but feel free to take it and include in your own collections/wikis.
I also wrap it into a small plugin if you prefer so!

17

Nice to add it to Shiraz!

The current version has some odd behavior. If you click the internal examples the window can be closed by a simple click (on the picture). After clicking once or twice on an external example all pictures (internally & externally) can only be closed via the cross button on the right top.

I also like the possibility that the images can be expanded to screen size as seen in the other two showcases by telumire and JanJo. The zoom option as seen in JanJo example is also a very nice addition.

18

Hi Joost,

It is by design!
There are two set of examples: set one closes image only by single click no close button!
Set two uses close button!

19

I noticed using the zoom effect in the light box actually effects the underlying wiki.

I think it would be useful to trap this so it only applies to the light box.

20

It uses anchor link so the wiki scroll up to the image!