Method to insert images in tiddler with possibility to enlarge on click?

1

I am using TW5 as a notebook for my role-playing group and I frequently use images, mainly portraits and maps. For the portraits it does not really matter, but for the maps, I cannot get TW to zoom the images to their original size somehow and keep the preview small enough to fit in the tiddler.
The images are linked to from a separate file server.

Any ideas?

2

Maybe you are looking for this; The link in the post is no longer available, This is the related library GitHub - fancyapps/ui: A library of JavaScript UI components that includes the best lightbox - Fancybox, the powerful Carousel, and the convenient Panzoom. · GitHub; I’m sorry that the post did not provide specific usage . I am confused about the license of this fancybox library and unsure if it can be shared

3

Saq’s spotlight plugin can do very many things with images, including click-to-fullscreen-gallery.

But it sounds like maybe your struggle has to do more with how to make the initial image preview fit within the tiddler, which could be as simple as [img width=100% [tooltip|imagetitle.jpg]]. Say more about what’s going wrong?

4

demo 这是一个可以直接可以点击放大的示例

image
image1734×1193 128 KB

5

This looks rather good, but unfortunately, the demo site you linked is not accessible.

I will try the Spotlight plugin, this could fit the bill for me.

As for the problem: it is just that the image is larger than the tiddler’s text width and I was looking for a way to have the preview enlarged. If I set the width to 100%, it fills the tiddler but the actual image is bigger than that and I can see no simple way to get to the original size (except for e.g. ‘open image in new tab’).

Any more info on how this could be incorporated into a standard TW5 instance? Looks quite good!

edit:
The example is here, feel free to comment… :slight_smile:

7

I managed to install the Fancybox plugin and it works perfectly. Now all images are lightboxed but that is bearable… :slight_smile:

I also tried kookma-lightbox and while it works, I cannot give options like alignment to display the image. Size can be specified but not left/center/right. I could also not see anything about this in the macro, so maybe this is not implemented.

8

because this plugin modified builtin image widget, you can also modified it, and fbox widget is available

9

Care to explain a little? I am just beginning to understand tiddywiki…
I mean it works now, but to have the ability to have some images with a fixed size and not lightbox-able would be handy.

10

Another little TW knowhow breakthrough for me… once I got the syntax right — so easy! I hope it helps others.

I understand, the OP may be asking how to rescale the image-thumbnail in-situ, and not open a 2nd tiddler.

I wanted to know how to make an external image in a tiddler, width set to thumbnail size, open the image-tiddler full-size. I was stuck on the syntax or unclear about the method.

I looked at IMAGES - every way to use them! — and read up on Button widget, ActionPopupWidget – but I was still lost — so I tested.

The solution, one tiny attribute… to that points to the tiddler to navigate to. Here are the steps…

  1. create and name a tiddler, eg. MyChart — we need to create a container pointing to an external image file.

  2. at the bottom of the tiddler, set Type to match the image source e.g. image/png or application/pdf

  3. add a new field-name as _canonical_uri with the field-value being the path to the external file, e.g. images/chart.png

  4. in the parent tiddler, add a button to trigger opening the new tiddler.

<$button 
    class="tc-btn-invisible" 
    style="width: 50px"
    to="MyChart"
    > 
    {{MyChart}}
</$button>