[tw] 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
<#%24%3A%2Fcore%2Fmodules%2Futils%2Fdom%2Fmodal.js> to achieve a look I am
happy with. You can see an example screenshot here:
Loading Image...

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="Loading Image...">

[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

Post by 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
<#%24%3A%2Fcore%2Fmodules%2Futils%2Fdom%2Fmodal.js> to achieve a look
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
--
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
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
Very cunning, I'm impressed.

Best wishes

Jeremy

<$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>
<img src={{$:/state/currentImage}} />
(..or similiar, this is just the template to display the image)
\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
<<lightBox "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" "test">>
<<lightBoxWithFixedTemplate "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" >>
/Andreas
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
<#14876d40eecea27c_%24%3A%2Fcore%2Fmodules%2Futils%2Fdom%2Fmodal.js> to
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
--
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
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
--
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
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:***@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
<

Post by Andreas Hahn
Hi Michael,
under the assumption that you only have one Lightbox open at a time (and
<$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>
<img src={{$:/state/currentImage}} />
(..or similiar, this is just the template to display the image)
\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
<<lightBox "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" "test">>
<<lightBoxWithFixedTemplate "http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg" >>
/Andreas
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
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
--
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
<javascript:>.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Andreas Hahn]

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

Post by Andreas Hahn
Some time ago Matabele published a set of various useful widgets that
are capable of emitting messages. In particular, one could redesign

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

Post by 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
*#1 The persistent one*
Create a tiddler called $:/lightBox/currentImage and set its type to
'Data Dictionary'.
\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
<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
\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
<img src={{$:/state/currentImage!!img}} />
{{$:/state/currentImage!!caption}}
/Andreas
P.S.: Thanks Jeremy :D