Dynamic Modal Lightbox?

[Michael Evans]

Thanks to Dave Gifford's TW5 Mall, I learned about using tm-modal, which dims and blurs the screen and creates a modal overlay of a designated tiddler. In layman's terms, it's a built-in lightbox effect.

I tweaked $:/core/modules/utils/dom/modal.js to achieve a look I am happy with. You can see an example screenshot here: http://i.imgur.com/mKk00Bw.png

By adding the code below to a tiddler, where imgtiddler1 is the name of a tiddler with an image (or other content) you want displayed modally, you can achieve this effect.

<$button message="tm-modal" param="imgtiddler1">

[img width="100" [SomeImage.jpg]]

</$button>

This is really great. But this means I have to create a tiddler for every image I want to lightbox this way.

Is it possible to somehow include a variable placeholder within the tiddler which will be displayed modally, passing along the source of an image to be displayed?

I'm not sure really how to do it, but if it's possible it means I can set up just one image tiddler, instead of dozens.

Thanks,

Michael

[Andreas Hahn]

Hi Michael,

under the assumption that you only have one Lightbox open at a time (and don't stack them), you could archieve the behaviour you want with this:

<$button message="tm-modal" param="ModalImage"  set="$:/state/currentImage" setTo="http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg">

[img width="100" [http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg]]
</$button>

and create the Tiddler "ModalImage" with this content:

<img src={{$:/state/currentImage}} />

 (..or similiar, this is just the template to display the image)

Also you can then substitute the button widget with a macro like this:

\define lightBox(img, template)
<$button message="tm-modal" param="$template$"  set="$:/state/currentImage" setTo="$img$">

[img width="100" [$img$]]
</$button>
\end

\define lightBoxWithFixedTemplate(img)
<<lightBox "$img$" "ModalImage">>
\end

Which you then can use like this:

<<lightBox "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" "test">>

or alternatively this:

<<lightBoxWithFixedTemplate "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" >>

/Andreas

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Jeremy Ruston]

Hi Andreas

under the assumption that you only have one Lightbox open at a time (and don't stack them), you could archieve the behaviour you want with this:

Very cunning, I'm impressed.

Best wishes

Jeremy

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Michael Evans]

Thank you. This works very well.

I tried to add an image caption variable with another set/setTo in the same button, like this: set="$:/state/currentCaption" setTo="$cap$"

It works but seems a button can only have one set/setTo, so adding this second one for the caption overwrites the image one. So the caption state updates, but the image state doesn't.

Is there a way for me to pass a caption to the ModalImage tiddler in addition to the image source?

Michael

[Andreas Hahn]

Am 17.09.2014 02:43, schrieb Michael Evans:

Is there a way for me to pass a caption to the ModalImage tiddler in addition to the image source?

Hi Michael,

yes it is possible using the same kind of approach but in my opinion it gets pretty ugly then. Nevertheless there are two possibilities that I can think of:

#1 The persistent one

Create a tiddler called $:/lightBox/currentImage and set its type to 'Data Dictionary'.
Then the macros can be redesigned like this:

\define lightBox(img, caption, template)
<$button message="tm-modal" param="$template$"  set="$:/lightBox/currentImage" setTo="
img: $img$
caption: $caption$">



[img width="100" [$img$]]
</$button>
\end



\define lightBoxWithFixedTemplate(img, caption)
<<lightBox "$img$" "$caption$" "ModalImage">>
\end

Of course you would also have to change your template to include a caption:

<img src={{$:/state/currentImage##img}} />

{{$:/state/currentImage##caption}}

#2 The somewhat pretty one

Some time ago Matabele published a set of various useful widgets that are capable of emitting messages. In particular, one could redesign the lightbox macro with help of his SetField widget:

\define lightBox(img, caption, template)

<$setfield tiddler="$:/state/currentImage" set="!!caption" setTo="$caption$" message="tm-modal"
param="$template$">
<$setfield tiddler="$:/state/currentImage" set="!!img" setTo="$img$">
<$button message="tw-set-field">



[img width="100" [$img$]]
</$button>


</$setfield>
</$setfield>
\end

This time I also feel much more comfortable using $:/state/currentImage for that, since it does not have to be setup first and only carries state information. In your template you can access the image-url and the caption like this:

<img src={{$:/state/currentImage!!img}} />

{{$:/state/currentImage!!caption}}

/Andreas

P.S.: Thanks Jeremy :D

[Andreas Hahn]

Am 17.09.2014 05:22, schrieb Andreas Hahn:

Some time ago Matabele published a set of various useful widgets that are capable of emitting messages. In particular, one could redesign the lightbox macro with help of his SetField widget:

It might be helpful to include a link here, sorry, I forgot that. You can grab and read about the SetField widget here:

http://gwiz.tiddlyspot.com

/Andreas

[Michael Evans]

Thanks again! I just want to point out for anyone referencing this later on that, in #1 of the captions examples, the template should include <img src={{$:/lightBox/currentImage##img}} /> and {{$:/lightBox/currentImage##caption}} instead of "{{$:/state..." but of course you can name it according to your own organizational preferences. 

Thanks again,

Michael