Thumbnail as link to popup
139 views
Skip to first unread message
skye riquelme
Sep 10, 2010, 2:26:30 PM9/10/10
to TiddlyWiki
Hi All
Is it possible to have a thumbnail image (maybe from Erics
ImageSizePlugin) be used as a link to open a Popup painel that has say
a video.......I prefer to have things like videos...in popups......and
am looking to make my TWs mor visual and less text-oriented..........
Ideally I am imaging a fet or script that identifies the tagged
tiddlers and generates a visual display of small images (that exist in
the targeted tiddlers)... that, on clicking open the video (also in
the tergeted tiddlers) in a popup ???
Possible....any ideas!!
Skye
Is it possible to have a thumbnail image (maybe from Erics
ImageSizePlugin) be used as a link to open a Popup painel that has say
a video.......I prefer to have things like videos...in popups......and
am looking to make my TWs mor visual and less text-oriented..........
Ideally I am imaging a fet or script that identifies the tagged
tiddlers and generates a visual display of small images (that exist in
the targeted tiddlers)... that, on clicking open the video (also in
the tergeted tiddlers) in a popup ???
Possible....any ideas!!
Skye
Måns
Sep 10, 2010, 2:55:32 PM9/10/10
to TiddlyWiki
Hi Skye
Ha ha - :-) You are really pushing the boundaries .... - as always.
I made something which does something like that:
Checkout:
http://maans.bplaced.net/TiddlyHome/kartotek/#Medier
The box (fET producing a list of tiddlers tagged with Media)to the
left has small buttons (iframe), when you hover the mouse on one of
them, a popup with an iframe appears.
Maybe it can get you started -
Happy hacking.
Cheers Måns Mårtensson
Ha ha - :-) You are really pushing the boundaries .... - as always.
I made something which does something like that:
Checkout:
http://maans.bplaced.net/TiddlyHome/kartotek/#Medier
The box (fET producing a list of tiddlers tagged with Media)to the
left has small buttons (iframe), when you hover the mouse on one of
them, a popup with an iframe appears.
Maybe it can get you started -
Happy hacking.
Cheers Måns Mårtensson
skye riquelme
Sep 10, 2010, 6:59:05 PM9/10/10
to TiddlyWiki
Hi Mans
Like your media library......need to study your script a bit
more.....some interesting stuff in there !!!!
Actually I realised I can do almost exactly what I want with Erics
PopupPreViewPlugin..........as often happens...Eric has already done
it!!!
The main constraint with this plugin is that I can´t use tiddler
sections ou slices.....image link is in one tiddler and each video
code has to be in its own tiddler....not that hard....but it would be
so much more efficient if everything was in one tiddler and the
PopupPreViewPlugin used sections.........maybe Eric could modifiy the
plugin to this end???
Thanks
Skye
On 10 Set, 15:55, Måns <humam...@gmail.com> wrote:
> Hi Skye
> use
Like your media library......need to study your script a bit
more.....some interesting stuff in there !!!!
Actually I realised I can do almost exactly what I want with Erics
PopupPreViewPlugin..........as often happens...Eric has already done
it!!!
The main constraint with this plugin is that I can´t use tiddler
sections ou slices.....image link is in one tiddler and each video
code has to be in its own tiddler....not that hard....but it would be
so much more efficient if everything was in one tiddler and the
PopupPreViewPlugin used sections.........maybe Eric could modifiy the
plugin to this end???
Thanks
Skye
On 10 Set, 15:55, Måns <humam...@gmail.com> wrote:
> Hi Skye
> use
skye riquelme
Sep 10, 2010, 7:53:36 PM9/10/10
to TiddlyWiki
Hi Again
Playing with it a bit more......AND there is a constraint in that you
CAN´T use Erics ImageSizePlugin to make the thumbnails....there is a
conflict between ImageSize and PopupPreview...in that they both use
shift-Enter....to mean different things........
eg
[img(200px,auto)[image.png][tiddler with video]] - with this code
SHIFT_ENTER with resize the image, NOT open the PopupPreview......so
manually make the thumbnail...now
[img[image_thumbnail.png][tiddler with video]] - and now SHIFT_ENTER
opens the PopupPreview......and you get to see the video!!!!
A bit cumbersome....but simple as TiddlyWiki can be !!!
Skye
Playing with it a bit more......AND there is a constraint in that you
CAN´T use Erics ImageSizePlugin to make the thumbnails....there is a
conflict between ImageSize and PopupPreview...in that they both use
shift-Enter....to mean different things........
eg
[img(200px,auto)[image.png][tiddler with video]] - with this code
SHIFT_ENTER with resize the image, NOT open the PopupPreview......so
manually make the thumbnail...now
[img[image_thumbnail.png][tiddler with video]] - and now SHIFT_ENTER
opens the PopupPreview......and you get to see the video!!!!
A bit cumbersome....but simple as TiddlyWiki can be !!!
Skye
Måns
Sep 10, 2010, 7:56:38 PM9/10/10
to TiddlyWiki
Hi Skye
fET..
Sth like:
[[SomeTiddlerTitle]]
<<tiddler SomeTiddlerTitle##fet>>
/%
!fet
<<forEachTiddler where
'tiddler.tags.contains(context.viewerTiddler.title)'
sortBy 'tiddler.title'
write
'(index < 20)? "|!"+(index+1)+"| <<tiddler SomeTiddlerTitle##pop with:
[["+tiddler.title+"]] \>\> |[["+tiddler.title+"]] |\n" : ""'
begin '"|sortable|k\n"
+"|| setIcon/~ImgLink |~TitleLink |h\n"'
end 'count+" tiddlers\n"' none '"no tiddlers \n"'>>
!pop
<<tiddler SomeTiddlerTitle##popup with:
{{store.getTiddlerText("$1##img")}} [[$1]]>>
!popcode
<html><a href="javascript:;" class="$4" title="$3" onclick="var
p=Popup.create(this); if (!p) return; var
t=store.getTiddlerText('$1'); if (!t) return; p.className+=' $6'; var
d=createTiddlyElement(p,'div'); d.style.whiteSpace='normal';
d.style.width='$5'; d.style.padding='2px'; wikify(t,d);
Popup.show(p,false); event.cancelBubble = true; if
(event.stopPropagation) event.stopPropagation(); return(false);">$2</
a></html>
!popup
{{span{<<tiddler SomeTiddlerTitle##popcode with: [[$2##ToBeRead]]
[[$2]] tooltip buttonClass 800 sticky>><<setIcon [[$1]]>>}}} <<tiddler
SomeTiddlerTitle##img with:[[$1]]
{{store.getTiddlerText("$2##ToBeRead")}}[[$2]]>>
!img
[img(3em+,)[$2|$1][$3]]
!end %/
Try it out - It has two different ways of showing text from the
section !ToBeRead in a tiddler tagged with [[SomeTiddlerTitle]] by
hovering (ImgLink) or clicking an image (SetIcon- needs Eric's
SetIconPlugin installed)
I borrowed the "popcode" from Eric's ShowPopup transclusion
http://www.tiddlytools.com/#ShowPopup
Cheers Måns Mårtensson
> The main constraint with this plugin is that I can´t use tiddler
> sections ou slices.....image link is in one tiddler and each video
> code has to be in its own tiddler....not that hard....but it would be
> so much more efficient if everything was in one tiddler and the
> PopupPreViewPlugin used sections.........maybe Eric could modifiy the
> plugin to this end???
I think you could make your own - based on some of Eric's code and
> sections ou slices.....image link is in one tiddler and each video
> code has to be in its own tiddler....not that hard....but it would be
> so much more efficient if everything was in one tiddler and the
> PopupPreViewPlugin used sections.........maybe Eric could modifiy the
> plugin to this end???
fET..
Sth like:
[[SomeTiddlerTitle]]
<<tiddler SomeTiddlerTitle##fet>>
/%
!fet
<<forEachTiddler where
'tiddler.tags.contains(context.viewerTiddler.title)'
sortBy 'tiddler.title'
write
'(index < 20)? "|!"+(index+1)+"| <<tiddler SomeTiddlerTitle##pop with:
[["+tiddler.title+"]] \>\> |[["+tiddler.title+"]] |\n" : ""'
begin '"|sortable|k\n"
+"|| setIcon/~ImgLink |~TitleLink |h\n"'
end 'count+" tiddlers\n"' none '"no tiddlers \n"'>>
!pop
<<tiddler SomeTiddlerTitle##popup with:
{{store.getTiddlerText("$1##img")}} [[$1]]>>
!popcode
<html><a href="javascript:;" class="$4" title="$3" onclick="var
p=Popup.create(this); if (!p) return; var
t=store.getTiddlerText('$1'); if (!t) return; p.className+=' $6'; var
d=createTiddlyElement(p,'div'); d.style.whiteSpace='normal';
d.style.width='$5'; d.style.padding='2px'; wikify(t,d);
Popup.show(p,false); event.cancelBubble = true; if
(event.stopPropagation) event.stopPropagation(); return(false);">$2</
a></html>
!popup
{{span{<<tiddler SomeTiddlerTitle##popcode with: [[$2##ToBeRead]]
[[$2]] tooltip buttonClass 800 sticky>><<setIcon [[$1]]>>}}} <<tiddler
SomeTiddlerTitle##img with:[[$1]]
{{store.getTiddlerText("$2##ToBeRead")}}[[$2]]>>
!img
[img(3em+,)[$2|$1][$3]]
!end %/
Try it out - It has two different ways of showing text from the
section !ToBeRead in a tiddler tagged with [[SomeTiddlerTitle]] by
hovering (ImgLink) or clicking an image (SetIcon- needs Eric's
SetIconPlugin installed)
I borrowed the "popcode" from Eric's ShowPopup transclusion
http://www.tiddlytools.com/#ShowPopup
Cheers Måns Mårtensson
Tobias Beer
Sep 11, 2010, 5:34:21 PM9/11/10
to TiddlyWiki
Hi Måns,
Would you have an example of this in action? I prefer to learn by
doing (observing).
Thanks, Tobias.
Would you have an example of this in action? I prefer to learn by
doing (observing).
Thanks, Tobias.
Måns
Sep 11, 2010, 11:15:48 PM9/11/10
to TiddlyWiki
Hi Tobias
I've made a mtc here:http://sandboxmm.tiddlyspace.com/#SomeTiddlerTitle
%20Thumb2
I've added you as a member - feel free to play around.
I tried to make a new [[SomeTiddlerTitle]] transclusion which uses
NestedSlidersPlugin to create resizable imagebuttons and popups -
however I cannot figure out how to replace img src="" with text from a
section (!img) from tiddlers fetched with fET... Maybe you can?
The "old" [[SomeTiddlerTitle]] is now called "Thumb2"...
Cheers Måns Mårtensson
I've made a mtc here:http://sandboxmm.tiddlyspace.com/#SomeTiddlerTitle
%20Thumb2
I've added you as a member - feel free to play around.
I tried to make a new [[SomeTiddlerTitle]] transclusion which uses
NestedSlidersPlugin to create resizable imagebuttons and popups -
however I cannot figure out how to replace img src="" with text from a
section (!img) from tiddlers fetched with fET... Maybe you can?
The "old" [[SomeTiddlerTitle]] is now called "Thumb2"...
Cheers Måns Mårtensson
Reply all
Reply to author
Forward
0 new messages