Re: [tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Yes thanks Mario and Måns plenty of opportunities to make this more interesing, but its great as a little slide show Alex On 22 June 2015 at 21:15, Sylvain Naudin sil...@gmail.com wrote: Well, interesting post ! I've play with it to for TWCamp site :) Thanks for sharing. Sylvain -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/307a744f-2171-46c4-ba51-ec07b8018aac%40googlegroups.com https://groups.google.com/d/msgid/tiddlywiki/307a744f-2171-46c4-ba51-ec07b8018aac%40googlegroups.com?utm_medium=emailutm_source=footer . 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 email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CALc1hYcV-zcypzNbQsBW-09TiHKkz93K3cYmDHxGgE4ViEOyZg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
On Sunday, June 21, 2015 at 11:15:06 PM UTC+2, Måns wrote:
Is there any way the img:nth-child(1){animation-delay:16s;} parts in the
CSS could be set in the macro pr. image?
That's what I meant with: at the moment, the animation is only set for 5
images. So the CSS will need some tweaking too.
I thought about CSS variables, but that seems to be FF only.
http://caniuse.com/#feat=css-variables
So imo we need a small js macro, that can calculate the needed CSS for us.
We'll see :)
-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 http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/2f133cc6-a0b2-4c4b-98eb-7cf09af9fa53%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Well, interesting post ! I've play with it to for TWCamp site :) Thanks for sharing. Sylvain -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/307a744f-2171-46c4-ba51-ec07b8018aac%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Hi Mans, I think the library name is misleading. At the first look, it seems to be pure CSS, which indeed would be easy to implement into TW. ... but ... it's a JS library. It doesn't fit well to TW, since it manipulates DOM IDs, which is a no go for TW, since we are used to more then one instance at the same time. Libraries, that manipulating the DOM don't work well with TW, since we rewrite the page if tiddler content changes. This may be with every keystroke. From a users point of view this point number 1: Ensure that all the images you wish to use are exactly the same size. imo is a problem too, which makes preparation more complicated at it should be. Conclusion: IMO not a good fit for TW. ... The images are nice, which makes the library more attractive as it actually is :/ -m -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a6231245-1f7c-4f3b-93fe-8da85e138831%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Hi Mario This is very, very nice - and the photos too :-) Can't help thinking that it would be extremely usefull if it could be modified to a macro which takes in a list of images based on a tag - and there you go ;-) The slider option seems to be a perfect fit for presentations - especially if we could show tiddlers and images. A mix of both options, manual slides and automatic slides, where the user can decide which one to use, and an option to decide how long each image should be shown might also be nice additions... Great to see that this is all possible with CSS. Thank you very much for showing how to do it Mario :-) Cheers Måns Mårtensson Ps: I've been missing something like Paolo's PhotoGalleryPlugin http://www.math.ist.utl.pt/~psoares/addons.html and your FancyBoxPlugin http://fancybox-plugin.tiddlyspace.com/* for TW5. Cheers Måns Mårtensson * http://fancybox.tiddlyspace.com/ Den søndag den 21. juni 2015 kl. 15.58.06 UTC+2 skrev PMario: Hi Mans, Important!!! - This is just a proof of concept. Import the attachment into a TW. The CSS and test tiddler should be easy enough, to see, what's going on and how to use it. The concept is taken from a codepen [1] from Antonis Kamamis. The images are mine so no credits needed, at least for me ;) It should be possible, to make the image frame more responsive, so you can have horizontal and vertical aligned images. It should be possible to make the number of links dynamic, with a TW list widget, and some simple templates. Dynamically calculating the CSS animations, seems to be a bit trickier, but should be possible with a very simple js macro or even CSS variables. So no js needed. Just TW macros out of the box. A quick search revealed one more page [2], which contains several pure CSS concepts. Probably all of them could be easily implemented into TW. have fun! mario [1] http://codepen.io/antoniskamamis/pen/hjBrE [2] http://bashooka.com/coding/pure-css3-image-sliders/ -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/87e4e5e4-41a3-4173-b8af-796811c5a5a3%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Hi Mans, Important!!! - This is just a proof of concept. Import the attachment into a TW. The CSS and test tiddler should be easy enough, to see, what's going on and how to use it. The concept is taken from a codepen [1] from Antonis Kamamis. The images are mine so no credits needed, at least for me ;) It should be possible, to make the image frame more responsive, so you can have horizontal and vertical aligned images. It should be possible to make the number of links dynamic, with a TW list widget, and some simple templates. Dynamically calculating the CSS animations, seems to be a bit trickier, but should be possible with a very simple js macro or even CSS variables. So no js needed. Just TW macros out of the box. A quick search revealed one more page [2], which contains several pure CSS concepts. Probably all of them could be easily implemented into TW. have fun! mario [1] http://codepen.io/antoniskamamis/pen/hjBrE [2] http://bashooka.com/coding/pure-css3-image-sliders/ -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b6017663-b635-457b-8217-f381eb412765%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. cssFader-proof-of-concept.json Description: Binary data
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
I found a pure CSS version, that seems to be super simple. The animation is done with opacity, which imo looks even better. Example follows in some minutes, after a little bit more testing. -m -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8bdfcd7c-0ce3-409b-894d-398912f6d064%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Hi Mario
I'm trying to create a macro which will show images in the CSSFader from
the canonical uri field of tiddlers with a specified tag.
Why doesn't this work?:
\define cssf(tag)
div class=container
$list filter='[tag[$tag$]]'
$set name=url value={{!!_canonical_uri}}
$set name=alt value={{!!alt}}
img class='photo' src=$url$ alt=$alt$ /
/$set
/$set
/$list
/div
\end
cssf ImageTag
Cheers Måns Mårtensson
Den søndag den 21. juni 2015 kl. 15.58.06 UTC+2 skrev PMario:
Hi Mans,
Important!!! - This is just a proof of concept.
Import the attachment into a TW. The CSS and test tiddler should be easy
enough, to see, what's going on and how to use it.
The concept is taken from a codepen [1] from Antonis Kamamis. The images
are mine so no credits needed, at least for me ;)
It should be possible, to make the image frame more responsive, so you can
have horizontal and vertical aligned images.
It should be possible to make the number of links dynamic, with a TW list
widget, and some simple templates.
Dynamically calculating the CSS animations, seems to be a bit trickier,
but should be possible with a very simple js macro or even CSS variables.
So no js needed. Just TW macros out of the box.
A quick search revealed one more page [2], which contains several pure CSS
concepts. Probably all of them could be easily implemented into TW.
have fun!
mario
[1] http://codepen.io/antoniskamamis/pen/hjBrE
[2] http://bashooka.com/coding/pure-css3-image-sliders/
--
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 http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/48aa776b-da69-4615-9742-ce0abfa7a069%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
at the moment, the animation is only set for 5 images. So the CSS will need some tweaking too. -m -- 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 http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5fef34c2-b6a2-4cac-8ad1-af2ec739c6a3%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
try this:
\define cssf(tag)
div class=container
$list filter='[tag[$tag$]]'
$set name=url value={{!!_canonical_uri}}
$set name=alt value={{!!alt}}
img class='photo' src=url alt=alt /
/$set
/$set
/$list
/div
\end
cssf ImageTag
and make sure, that your images are tagged, and type: image/jpeg or png,
depending on your images. So the tiddlers should show the image. Then
everything is set up right.
--
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 http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/92a50fa2-3508-4984-bb1e-00d169c1cb5b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: cssslidy.js - How to use and setup as a macro in TW5?
Hi Mario
Great! Thank you very much.
Glad to see it was two typos I made ($$ instead of and usage of
quotationmarks) and not the whole thing that was wrong :-)
http://xn--mns-ula.dk/kinabog/#CSSFaderListTagMacro
Is there any way the img:nth-child(1){animation-delay:16s;} parts in the
CSS could be set in the macro pr. image?
Would I have to make the macro be a part of the stylesheet to make it work
- or is it possible to let it be set remotely - in the generated list?
I guess the number might be generated by a counter in the listed output and
the delay could be a default one, set in the macro - or set by individual
tiddler fields eg.: delay:16s..
Cheers Måns Mårtensson
Den søndag den 21. juni 2015 kl. 22.17.33 UTC+2 skrev PMario:
at the moment, the animation is only set for 5 images. So the CSS
will need some tweaking too.
-m
--
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 http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/f805c8e6-168f-4930-a77f-91b681d6f40f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
