[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hi Evolena,

Now I've played around a bit with your last macro above, I really like it. 
The scroll-bar issue disappears if the tiddler has enough other content and 
having to scroll down a bit for larger images isn't too bad at all. It also 
has a compact elegance - eight lines!, Bowie would be proud. I tried 
singing it to the tune of "Eight Line Poem" but it doesn't flow too well - 
can't have everything.

Thanks again, Bob

  

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/dd5ebb93-af92-4945-afb6-b52297ad32a4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello Evolena,

I think I prefer this new method, except that the top of the popup image is 
too far down the page, which requires a bit of scrolling (to see the full 
image). Plus the sudden appearance of a scroll-bar on the right causes a 
small resizing of the elements on the page, which is ugly to watch.

Thanks again for all your help, Bob

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/7610f7ea-d874-482b-a4ac-68d761336def%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Evolena]

Le samedi 25 juin 2016 11:09:01 UTC+2, Bob Flandard a écrit :
>
> Hello Evolena,
>
> Thank you for the code!, it works nicely and was much easier to get 
> working than I anticipated.
>
> It's a shame the "tool tip" option of the img macro can't be overloaded or 
> modified to show an enlarged image instead of text, that would save two 
> mouse clicks and a mouse drag to locate the "close" button. Some folks... 
> never satisfied.
>
> All the best, Bob
>
>
You can also look at the Popup exemple for the RevealWidget 
. You can put your little image as 
content of the button widget, your enlarged image in the content of the 
reveal widget, and make this a macro to avoid writing all this stuff each 
time.

Something like that:

\define image-popup(url)
<$button popup=<>>
[img width={{!!imagewidth}} [$url$]]


<$reveal type="popup" state=<>>
[img[$url$]]

\end
The qualify macro ensure all your image popup don't pop at the same time when 
you click on one.


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/3e8f9200-22bc-433a-891b-b3830ecf2a2b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello Evolena,

Thank you for the code!, it works nicely and was much easier to get working 
than I anticipated.

It's a shame the "tool tip" option of the img macro can't be overloaded or 
modified to show an enlarged image instead of text, that would save two 
mouse clicks and a mouse drag to locate the "close" button. Some folks... 
never satisfied.

All the best, Bob


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/9f5ffd9b-da6f-470b-b051-b7c589fb0f17%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello Evolena,

Many thanks for your detailed explanatory notes. I shall explore them in 
detail this weekend.

Best wishes, Bob

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/112a5dc9-b10e-444f-807a-1287a6f31860%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Evolena]

Let's me try to explain step by step:

<$button class="tc-btn-invisible tc-thumbnail-image">
...

The WidgetButton  creates a button.
The "class" attribute defines how it looks like: "tc-btn-invisible" removes 
the grey box of classic buttons, and "tc-thumbnail-image" is a facility to 
style the image (this class is used for the Thumbnail macro 
 that you can see in action in 
the HelloThere tiddler of tiddlywiki.com).

<$action-sendmessage $message="tm-modal" $param="template/picture" 
url="./images/Blurry%2520Lawn.jpg"/>
The SendMessage action widget 
 allows the button to 
trigger an action by sending a message (and this is why we used a button 
widget: it's currently the only element taht can trigger an action widget), 
here "tm-modal " to 
open a modal window. This message can take parameters:
- "$param" is the title of the displayed tiddler. As we don't have tiddlers 
for our images, I use a template tiddler 
: "template/picture". It acts as a 
skeleton for the content of the modal.
- "url" is a variable (or parameter) for the template

The template contains:
<$image source=<>/>
So the modal will display an image, whose url is the variable set 
previously in the message "tm-modal". 
The ImageWidget  is used because 
the source is not already defined, the [img[]] syntax doesn't work with 
variables.

Finally
<$image source="./images/Blurry%2520Lawn.jpg" width={{!!imagewidth}}/>
displays the "label" of the button, here an image. It is exactly what you 
had at the beginong, but with an ImageWidget instead of [img[]] (which 
could work here).

If you want to create a macro, you would have to replace the name of the 
image with a parameter:

\define macro-image(url)
<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param="template/picture" url=
"$url$"/>
<$image source="$url$" width={{!!imagewidth}}/>


And then use it with
<>


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/717bd6c6-e789-49e6-9198-37ff6e4b44c6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello Evolena,

Thank you for your lightbox and other macro ideas.

It'll take me a while to get what you've done, but thanks in the meantime.

Regards, Bob

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/378fe1a0-1162-418c-bb72-ff878962076f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Evolena]

As I had to leave quickly when I first replied, here are some explanations.


This code works with ExternalImages , 
so you would have to create tiddlers for each images (but the image is not 
fully integrated into the wiki), which may not be what you want.
You can try it directly in a new tiddler on tiddlywiki.com, the filter 
retrieves its two external images.
The CSS is here embedded into a style tag, but you can create a custom 
stylesheet  for that.

Another solution:

A first template tiddler for the modal, with this content:
<$image source=<>/>

Then you use it with this code (that you can encapsulate in a macro, with 
the url as a parameter):
<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param="template/picture" 
url="./images/Blurry%2520Lawn.jpg"/>
<$image source="./images/Blurry%2520Lawn.jpg" width={{!!imagewidth}}/>





-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/2ff89e17-6ebf-4e14-9188-13c5e67071ab%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Evolena]

With the same "lightbox", idea, I had come to this a year ago:


@media (max-width: 55em) {
.tc-modal-body img {
display: block;
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 55em) {
.tc-modal {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
max-width: 95%;
}
}

.tc-modal-body {
padding: 1px 15px;
min-width: 750px;
}

.tc-modal-body img {
max-width: 100%;
}


<$list filter="[is[image]has[_canonical_uri]]" variable="currentImage">
<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param=<>/>
<$image source=<> width={{!!imagewidth}}/>



The idea was to make the lightbox the width of the window, but the CSS seem 
to not work as intended... 


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/361c459a-bee0-40c5-aa45-745205841c30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hi Mario,

Thank you for the link!

Regards, Bob

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/ea7d2af9-c05e-4e22-aa86-f182cd0bd699%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[PMario]

Hi Bob,

Not exactly, what you requested, but may be a good start: 
http://tobibeer.github.io/tw/ibox/#Examples

If you search the group for "modal" and "lightbox"  ... sorted by date ... 
you may find more useful posts. 

have fun!
mario

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/02f6dee3-c06e-493a-bf2f-8a1ad9c230e9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: [TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello,

Assuming the scenario above is not possible, then would it be possible for 
an enlarged version of the image to be displayed on mousing over the small 
image?. If I need to type the image address twice that's fine. Or if it can 
be done using html rather than the img command then that's okay too.

Thanks, Bob


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/e7f6f4db-0f5a-412e-9d13-b0f2bbcfbaff%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.