Popup images?

[Leon Gomez]

Is there any way to pop up, open or enlarge images to their natural size (ideally within the tiddler)?

[Jon]

Hi Leon,

This will open up the image in the browser. 

Put the following in a tiddler and tag it with  $:/tags/Macro

\define imageit(image:"image.jpg" path:"FolderName/")

<a href="$path$$image$" target="new"><img src="$path$$image$" width="45%" height="45%" /></a>
\end

Then in the tiddler you want the image, include the following:

<<imageit "imagename.jpg">>

https://groups.google.com/forum/#!topic/tiddlywiki/P2olY8Vpv94

Regards

Jon

[Anjar]

Hi Leon,

It is also possible to enlarge the image inside the tiddler. Something like this should work:

<style>

.thumb{

width: 25%

}

.full{

width: 100%

}

</style>

<$button class="tc-btn-invisible" set="temp" setTo="full">

<img src="***imgsrc***" class={{temp}} />

</$button>

where you have to switch ***imgsrc*** to the path of your image. In addition you have to create a tiddler with title "temp" and text "thumb"

Best,

Anders

[Leon Gomez]

Thank you both, they work well

Fiddling around a bit this worked for me as well. It pops images under the thumbnail and take the state name from the image so as long as they are not repeated there is no conflict:

Macro:

\define popImg(image:"", text:"", size:"100")

<$button popup="$:/$image$" class="ddthumb s$size$">

[img[$image$]]

</$button>

<$reveal type="popup" state="$:/$image$">

<div class="ddimg">

[img[$image$]]

$text$

</div>

</$reveal>

\end

CSS: 

.ddimg {

    min-width: 380px;

    border: 1px solid #bbb;

    background-color: #ffffff;

    padding: 3px;

    margin: 4px 0 0 0;

    white-space: nowrap;

    border-radius: 4px;

    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 

    -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 

}

.ddimg img {

display: block;

}

.ddthumb {

background: white;

border: 1px solid black;

padding: 0;

}

.s100 img {width: 100px;}

.s200 img {width: 200px;}

.s300 img {width: 300px;}

.s400 img {width: 400px;}

.sFull img {width: 100%;}

Called: 

<<popImg

     image: "maps/celu_tower_f4_notated.png"

     text: "sample text"

     size: "200"

>>

<<popImg "maps/celu_tower_f2_notated.png">>