cssslidy.js - How to use and setup as a macro in TW5?

[Måns]

Hi TwWizards

I just came across this: http://dudleystorey.github.io/CSSslidy/ and couldn't help thinking that it might be easy to implement in TiddlyWiki.

I'm not sure how to make it work though...

Do you know how to do it?

Cheers Måns Mårtensson

[PMario]

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

[PMario]

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

[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/

[Måns]

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* and your FancyBoxPlugin** for TW5.

Cheers Måns Mårtensson

* http://ismer.tiddlyspace.com/#PhotoGalleryPlugin

** http://fancybox.tiddlyspace.com/

[Måns]

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:

[PMario]

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.

[PMario]

at the moment, the animation is only set for 5 images. .... So the CSS will need some tweaking too.

-m

[Måns]

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

[PMario]

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

[Sylvain Naudin]

Well, interesting post !

I've play with it to for TWCamp site :)

Thanks for sharing.
Sylvain

[Alex Hough]

Yes.... thanks Mario and Måns

plenty of opportunities to make this more interesing, but its great as a little slide show

Alex

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@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.