gre / diaporama Goto Github PK

This task is almost required by tasks #3 and #5 (maybe we could use jQuery plugins architecture instead of coffee extend usages)

from @senntyou in #47 (comment)

Additionally, i found a bug of diaporama. When diaporama is about to circulate, "slide" and "slideEnd" will be triggered twice.

diaporama.addListener('slide', function() {console.log('slide')});
diaporama.addListener('slideEnd', function() {console.log('slideEnd')});
diaporama.addListener('transition', function() {console.log('transition')});
diaporama.addListener('transitionEnd', function() {console.log('transitionEnd')});

It could be interresting to have the choice of the target par picture : "_blank","_top".

Actually it is "_blank"

thanks

extend the diaporama format to support easing alias:

{
  "easings": { "ease": [0.25, 0.1, 0.25, 1.0], ... },
  ...
}

and use it from a kenburns or a transitionNext:

{
  "easing": "ease",
  ...
}

more generally, need to add a "transformer" step when a new data is populated

like bothly with
new Slider({ node: ..., duration: ..., transition: ...})

and

new Slider(node).setDuration(...).setTransition(...)

cool way to factorize that?

Hi, getting a 404 error at sliderjs.org

I looked all over, tried searching for the word 'download'.. no luck.

I will get the code from here, but not sure about others, maybe a big download button would be nice?

Allow to define a slide that is rendered by a GLSL fragment shader :)

when I set autoplay to false, then calling next() method, transition effects not working, even if I set duration next(2000), is this bug?

Current Problem: the event "slideEnd" and the event "transitionEnd" are triggered almost the same time, so there's no need to do the same thing two times. The event "slideEnd" can be placed in another place, to do more.
I think, the event "slideEnd" should be trigger just after an image completing transition and kenburns(important, after the two effects completed).
Reason: the new "slideEnd" could cover the functionalities of the old one, in addition, it can do more. When an image is already completed, diaporama can jump to a random image, by listen to the event "slideEnd".
Is it practical?

This is reproductible on http://greweb.me/diaporama-example1/ where you press "right arrow" enough fast to switch between slides, the last->first next() will not work like others next()

• write a test to reproduce the bug
• fix the implementation

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

anyone got an idea why the links are not working here

http://testshop.bartels-sondermaschinenbau.de/

The links are being written, just the banners are not clickable

something to do with canvas
i comment out the
slider.setTransitionFunction({ render: SliderUtils.clippedTransition(function(ctx, w, h, p) { return ctx.arc(w / 2, h / 2, 0.6 * p * Math.max(w, h), 0, Math.PI * 2, false); }) });

line and they work fine

because it is not firstly design to be connected to a stream, we should have an utility function that simplify the work.

Basically if you have a continuous stream of image, we have to append to the timeline, and when the currentTime advance, we should "destroy" previous slides and offset the currentTime.

allow users to use $('#sliderContainer').sliderjs(); and new Slider($('#sliderContainer')); (both)

👍

Make a more robust validation of the data format given by the user with precise error feedback at instanciation time (instead of run time).

Stack trace:

Error in event handler for (unknown): TypeError: undefined is not a function
    at Object.StoreTransitions.destroy (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:17457:20)
    at Object.DiaporamaRenderingCanvas.destroy (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:17514:22)
    at Object.assign.destroy (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:16813:21)
    at React.createClass.componentWillUnmount (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:16661:20)
    at ReactCompositeComponentMixin.unmountComponent (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:30097:14)
    at Object.ReactReconciler.unmountComponent (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:38006:22)
    at ReactCompositeComponentMixin.unmountComponent (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:30103:21)
    at Object.ReactReconciler.unmountComponent (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:38006:22)
    at Object.ReactChildReconciler.unmountChildren (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:28429:23)
    at ReactDOMComponent.ReactMultiChild.Mixin.unmountChildren (chrome-extension://nebbhkdcphlabifnafeopppcnjmnjoef/lib.min.js:36745:28)

StoreTransitions.prototype = {
  destroy: function () {
    for (var t in this.ts) {
      this.ts[t].t.destroy();    // crash happens here      <---------------- 
    }
    this.ts = null;
  },

sometimes it is great to just try again an image load.
allow a parametrable retry system on top of croissant.
A smart way would also be to make an increasing timeout & allow pauses between retries.

Hi gre!

I wanted to thank you.
Diaporama is a great piece of software! :-)

Regards,
Gerold

filed by @AVVS : gre/diaporama-editor#1 (old repository)

I don't know if it's intended or not, but programatically switching the slide skips animation and instantly turns on the next slide. Is there any way to make sure transition animation is applied before next slide is turned on?

For Diaporama slideshows, rendered in PhantomJS, all transitions apear as crossfade . Same slideshows rendered in Chrome looks good.

First thanks for your work,

I have an issue when I watch the slider on an android smartphone.
The pictures are to large inside the slider.

For information I have test it on a sony Ericsson Xperia X10 android version : 2.1

Ideas

Coding theme and transition live in the demo page, saving on gist, making the user custom lib ?

a new feature allowing to apply effects on the slideshow.

• Effects can be stacked. I can add multiple effects one after the other.
• Effects intensity can be changed over time. Maybe inspire from the powerful Blender IPO curves.
• to be figured out: per slide VS global ?

TODO:

• spec the effects format. (idea: a GLSL frag shader with uniform sampler2D input; uniform float power;)
• effects.glsl.io & transitions.glsl.io
• Write a few effects (classic stuff like grayscale, sepia, vignette, ...) // Is there an existant format for that somewhere? integrate only if it is free software.
• in the diaporama format, a new "effects" array.

That's a lot of work! if anyone have ideas or want to help :-)

I'm not sure what freeSlideBehind is for:

Mr Doob's GLSL sandbox ( http://mrdoob.com/projects/glsl_sandbox ) shows how power and efficient shaders are, and maybe it can be used in Slider.js for complex transitions where we previously have to manipulate some CanvasDataImage which wasn't so efficient.

The use of KenBurns.WebGL and glsl-transition-core force to use different canvases (3) to perform the diaporama. This doesn't scale because WebGL have limited simultaneous contexts.

We should probably use framebuffers instead.

I'm trying to add a video in an generated slideshow. But every way I try, if the video is in de json I get this error.

{ "generator": { "version": "0.6.0", "url": "https://github.com/gre/diaporama-maker" }, "timeline": [ { "duration": 1500, "transitionNext": { "duration": 1000 }, "image": "fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg" }, { "duration": 2500, "transitionNext": { "duration": 1000 }, "video": { "video/mp4": "bbb_sunflower_1080p_30fps_normal.mp4" } }, { "duration": 5100, "transitionNext": { "duration": 1000 }, "image": "photo-1421930451953-73c5c9ae9abf.jpg" }, { "duration": 4000, "transitionNext": { "duration": 1000 }, "image": "photo-1423483641154-5411ec9c0ddf.jpg" } ] }

Maybe http://docs.jquery.com/QUnit

I need to slide/carousel simple html pages or iframes,
is it possible with Slider.js ?

... follow a page sample I'd like to convert in a carousel : http://gitwatcher.com/
the object I'd like to slide is actually

<div id="chart" style="position: relative;">
    <iframe height="540" frameborder="0" width="860" scrolling="no" name="Drawing_Frame_82178"
     id="Drawing_Frame_82178" marginheight="0" marginwidth="0">
    </iframe>
</div>

any idea ?

Thanks in advance
Luca

this implies more thought on how to render things, if this means rendering out of bounds or not, e.g;

hello, there is a bug with the squares transition on Google Chrome (27.0.1453.110 m), the next image shows during a fraction of second just before the transition starts. I'm quite sure was no bug few months ago, so I wanted you to know for the v2 in case you haven't noticed it ;)

ps: tu es français?

@gre When rendering video, it would be nice if you could add text in the playing video, do you know if there is a way how to achieve this? Do you plan to implement this functionality?

filed by @AVVS : https://github.com/glslio/diaporama/issues/2 (old repository)

for some reason the tests are buggy now.
The tests are colliding / side effects