Maybe a silly question, but I'd love to make a slideshow, and then somehow allow the user to download it as an mp4 / gif, or else capture the data, send it to a server, and create an mp4 / gif out of it there (for the user to download).

Is that possible?

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?

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?

Greetings!

I've been using slider.js for a personal photo spinner project. I thought people might be able to use the modifications I made to support images of heterogeneous sizing; in the original configuration, an image's width is fit to the width of the slider and the height is scaled to maintain aspect ratio (but the bottom of the image might be clipped).

This modification updates the image size relative to the slider frame so that the entire image fits in the frame. More specifically, the image is scaled up or down as needed so that:

• the entire image fits in the frame
• aspect ratio is maintained
• one of the dimensions (width or height, depending on the aspect ratio of the frame and the image) is filled.

-- Known Issues --

• Resizing the slider does not recompute the image sizes.
• slider.min.js has not been updated and the docs have not been updated (I lack a functional install of yuicompressor or doccos).

Let me know if you have any questions!

Sincerely, Mark Tomczak Pittsburgh, PA, USA

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

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;
  },

This pull request addresses issue #14 (All options could be given in the constructor). This is my first time working with Coffee Script, so I thought it would be a fun simple issue to take care of. Would love some feedback.

The interesting part is the constructor of slider (https://github.com/mpdaugherty/slider.js/pull/new/master#L5R239). I've moved the properties that people may want to set into a 'defaults' object on the prototype. Then, during initialization, if the user passes in an object with any of the same property names, those properties are set directly on the new Slider.

If the setX() functions were all extremely simple (e.g. set property and return this), we could also automatically generate them from the default property object. However, they seem to do extra work when @node is already set, so I decided not to go that far.

There are also some other properties like 'transition' that we could probably add to this set of options, and we might want to add the new properties in SliderWithCanvas. I'd like to get your feedback first, however, to make sure these changes match your project; as I mentioned, I haven't done any Coffee Script before, so I'm not really sure if this is idiomatic or not...

To test, I modified demo/index.html to use the new constructor options (https://github.com/mpdaugherty/slider.js/pull/new/master#L1R109). Is there a more complete test suite somewhere?

Finally, my editor automatically removed extra spaces at the end of some lines, so the diff is a little messy. My apologies.

Created with https://github.com/dkhamsing/frankenstein

GitHub Corrected URLs

| Was | Now | | --- | --- | | https://github.com/glslio/glsl-transition | https://github.com/gre/glsl-transition |

HTTPS Corrected URLs

| Was | Now | | --- | --- | | http://github.com/glslio/diaporama-react | https://github.com/glslio/diaporama-react | | http://github.com/gre/diaporama-maker | https://github.com/gre/diaporama-maker | | http://github.com/gre/kenburns | https://github.com/gre/kenburns | | http://gre.gitbooks.io/diaporama/content/ | https://gre.gitbooks.io/diaporama/content/ | | http://gre.gitbooks.io/diaporama/content/** | https://gre.gitbooks.io/diaporama/content/** |

Other Corrected URLs

| Was | Now | | --- | --- | | http://npmjs.org/package/diaporama | https://www.npmjs.com/package/diaporama |

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?

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

Instantiating a diaporama instance adds a canvas to the DOM but destroying does not remove it. This is a problem for single-page apps that may instantiate and destroy diaporama many times.

#66

Building diaporama emits a warning due to glsl-transitions being deprecated. gl-transitions is not exactly a drop in replacement so will require some work to migrate.

If you try to play a video in diaporama on Mobile Safari, you'll see the video play but you won't hear the video's audio track (tested on iOS 10 and 11).

I've tried setting the playsinline attribute on the item.video. Neither seems to work: https://github.com/rorito/diaporama/commit/6579232d2577627af842992ea0cad06c7aac8cca https://github.com/rorito/diaporama/commit/57f7e3f2a55f803a7c5a5b4e3123b20690d36a45

Basically, I’ve tried setting the playsinline attribute of item.video, but I wonder if maybe Mobile Safari doesn’t respect that because the video element isn’t in the DOM? It could also be that the user gesture action of clicking the diaporama-controls play button isn't interpreted by Mobile Safari as a user action on a

If I’m reading the guidelines correctly (https://webkit.org/blog/6784/new-video-policies-for-ios/), as long as you don’t autoplay and the play starts with a user action, you should be able to hear the video’s audio when played inline. I don’t think you need to have the

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" } ] }