giniedp / spritespin Goto Github PK

View Code? Open in Web Editor NEW

377.0 22.0 122.0 20.73 MB

jQuery plugin for spriteanimation.

Home Page: http://giniedp.github.com/spritespin/

License: MIT License

JavaScript 3.48% TypeScript 96.52%

spritespin's Introduction

spritespin's People

Contributors

Stargazers

Watchers

Forkers

ben-duffin rrandesidesign zerodev visdesk jeffdrumgod dharmap cinetryx xpoft baden03 rwch csscat fecori badrobot25 yashilanka iulyus agiza jamessaint thetoke madhugb belenpicazo zapatronen casper0098 voilet ming300 fhmob larryanomie symaticpro robinjiang cloozis shenjler mwmalinowski renato-js monstersla mrblaschke seekr fhefh2009 vitto32 byeloff shadabsiddiqui lzpfmh drna3r hungld nickdenardis raymondzhong natrbro liuyp208 3660628 verawei changan712 brcase-ut diligofri babaninfv saifwebberoo dustinrjo ccczone alenkas erinrwhite icezyburg brice-j pacebale rdch106 bhushanjss betmakh rkalkani linjiarui dimimo xuanhoang90 mkdgs elleryfamilia penhaohuang danpetrucci borovikpro sueannioanis narendra4321 gersomhdez radoslavmiladinov folkcode thesciencemuseum scritpter-cd jovannilucas9 eriksunden danieleddm voltproject umarmughal zawsx enhaythambadran corollarium hm-tam peterzero farobarcha joekuo135 michaellabreuu cyrke imkwangkung copylefter winjayyu chaitanyah thekung asmagin manhtienpt

spritespin's Issues

Issue on IE8

Hello, I had an issue on IE 8. It concerns images.indexOf(this) line 139, because IE8 does not support indexOf() on Array.
I workaround it by defining the function, as said on http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8

instead of dragging - on scroll?

Would it also be possible to change the behaviour from Drag to Scroll?

Spritespin works laggy on webkit-based browsers in Windows 7

Hello.

We use SpriteSpin to show a 360 degrees view of a car. And we have some strange troubles in webkit-based browsers. SpriteSpin works, but with some lags while dragging the canvas. I've recorded a screencast, here's a link.

http://screencast-o-matic.com/watch/cDj6QIi7hj

And here's a link to website where we use the plugin: http://www.hyundai.ru/configurator/car?compl_id=298&packets=

Can you offer us something to solve this problem?
Thank you.

Disable right mouse click and middle mouse-wheel click

Is there a possible within spritespin.js plugin to disable the right mouse click and middle mouse-wheel click?

Not loading on iPhone 5

I have a little problem and I can't figure out what's going on. Everything works well on desktop but when I try to load the page on an iPhone, the plugin is not loading.

Here is the error I got :

IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Here is the link :

http://dev.nwseatcovers.com/en/seat-covers/oe-series/original-equipment

Anyone got an idea ??

Thanks!

Spritespin and the canvas renderer do not work on Android Chrome at high resolutions.

I tested using my spritesheets to reproduce the issue on your site by changing the source value on your examples page, "http://spritespin.ginie.eu/samples/#/basics-spritesheet".

I can confirm I reproduced the issue.
I managed to fix the issue by reducing the total resolution of the spritesheet from 8960x4680 to 4480x2340.

I've included links to the two spritesheets so you can confirm the issue yourself, both sprite sheets have a total of 180 frames on 14 columns.

https://s3-eu-west-1.amazonaws.com/frontier-platform-hosting/360-sprite-tests/dino-320-spritesheet.jpg - Working

https://www.jurassicworldevolution.com/files/360-sprites/pachycephalosaurus_spritesheet.jpg - Not Working.

Hope this helps, and let me know if you need any more information.

Png Error

This plugin not working with png images.

Uncaught Error: No module found with name drag

Hi guys, thank you very much for this amazing plugin but unfortunately I cannot launch it successfully.
I get this weird error: Uncaught Error: No module found with name drag

For reference, here is my index.html:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="javascript/spritespin.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>
        Spritesheet viewer
    </title>
</head>

<body>
    <div id='mySpriteSpin'/>
</body>

<script type='text/javascript'>
  $("#mySpriteSpin").spritespin({
    source  : "sprites/arc.jpeg", // path to sprite sheet
    width   : 320,  // width in pixels of the window/frame
    height  : 320,  // height in pixels of the window/frame
    frames  : 16,   // total number of frames
    framesX : 16     // number of frames in one row inside the spritesheet
  });
</script>

Would be very happy to get some help on this one ;-)

Thanks again.

Touch scrolling over sprite not possible

If I have a spritespin element (regardless if it's a img-sprite or a canvas) I cannot scroll on touch devices if I scroll over the element. All touch events just going into the spritespin. But that is not necessary, if the sprite is just horizontally moved. Can you please provide touchscrolling vertically and do not catch these events if not necessary?

Which files need to be hosted?

Hello @giniedp ,
I am the member of cdnjs project.
We want to host this library.
But there is a question want to ask.
I think the main file are release/spritespin.js and release/spritespin.min.js on github.
But I am not sure does there any dependency files need to be grab under src/?
Or any other files need to be grab.
Please help me confirm that.
Thanks!

cdnjs/cdnjs#8721

"wrapLane: true" doesn't work

Hi,
The wrapLane parameter doesn't work because it is not considered in Spin.updateFrame() function around line 401, the case lane in not undefined should be:

    if (lane !== undefined){
      data.lane = lane;
      if (data.wrapLane){
        data.lane = wrap(data.lane, 0, data.lanes - 1, data.lanes);
      } else {
        data.lane = clamp(data.lane, 0, data.lanes - 1);
      }
    }

Regards

Switching color in 360 degree view

Hi,
Your code is excellent and its is very useful in our project but now I had a requirements from my client they need 360 view product with color switching is there are possibility to switch another color image and that also will be 360 view.
Thank you

Question: any recommendation as to how I could take the photos?

Bind to "wheel" instead of "mousewheel" events

It seems by default you bind to the event mousewheel:

spritespin/src/core/constants.ts

Line 20 in 0153d2e

'mousewheel',

This is a non-standard event; according to MDN

This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard wheel event.

Instead you should be binding to just wheel to ensure browser compatibility.

I do not believe anything in the core library or core plugins uses this handler, so it shouldn't be a breaking change. For backwards compatibility we can bind to both mousewheel and wheel.

Click behavior not using api?

It looks like the click behavior does not use the api correctly on line https://github.com/giniedp/spritespin/blob/master/src/spritespin.beh-click.js#L18. There is an error being thrown.

Currently

$this.spritespin("next");

Correct?

$this.spritespin("api").nextFrame();

Responsive feature

I am using this library on a project of mine, it looks awesome ! Any ideas to make this plugin responsive ? I would be happy to work on it but I am having trouble to imagine how I could do that....

responsive and hires/retina screen optimizations

the canvas element does not include any retina support at the moment neither is it easy to get the whole thing responsive.

Is there an event when the rotation stops at a particular frame in sprite spin?

Hi,

I am using sprite spin in react js for implementing 360 deg view. I dynamically load an svg at every breakpoint when next is clicked. Currently the svg gets loaded immediately after next is clicked. What I would want is to load the svg after the frame stops at an image.

@giniedp . is there is any event when the rotation ends, so I could load svg when it stops at a frame.

Thanks!

Sprite Sheets doesnt work on iOS Chrome

For some reason, on Chrome iOS (latest version of iOS tested), the sprite sheet spin version doesn't work. It just tends to show the first frame but not actually spin. On your site, the image doesnt load at all.

Required Zepto modules

I can see that spritespin can depend on Zepto instead of jQuery. Do you have a list of required zepto modules? It looks like bower-installed zepto is not enough for spritespin to work. Adding zepto-data fixes the problem.

My project has no other jQuery dependency than spritespin and I'd like to have as lightweight solution as possible.

Change source data after initialize

Hello. I think it would be great if we can change particular frame source through SpriteSpin instance without re-initialization.

My current solution:

SpriteSpin.extendApi({
    replaceSourceFrame: function(src, frame){
      frame = frame || this.data.frame;
      this.data.source[frame] = src;
      SpriteSpin.create(this.data);
    }
});

Maybe You can offer more elegant solution for this?
Thank you.

spritespin is incompatible with fancybox 3.x.x

When i use fancybox on site and try init spritespin then i have this error in console:
TypeError: self.instance.$refs is undefined

See: https://jsfiddle.net/xpvt214o/337509/

Default preloadCount in error

Hello, I had a problem with IE8 again, only the first image is loaded.
Because in the load() function in the for line 151 to 157, the first image finish loading before pushing the next into images. So the completness test line 146:
if (!completed && (count >= (targetCount || images.length)) && firstLoaded && (typeof opts.complete === 'function')) {
thinks that every images have be loaded (if targetCount is not set).

Here images.length should be replaced by src.length to make sure we have the real count of images:
if (!completed && (count >= (targetCount || src.length)) && firstLoaded && (typeof opts.complete === 'function')) {

Regards

fullscreen aspect ratio

Hi,
I tried the
http://spritespin.ginie.eu/examples.html#fullscreen.html
example, and I noticed that the image get stretched when activating full screen...
Is it possible to maintain aspect ratio of the image when going in full screen mode?
thank you
Maurice

Canvas renderer does not work on chrome OS.

jurassicworldevolution.com/research -> example

data.frames defaults to 2 in IE 8

data.frames defaults to 2 even though the source has over 30+ images in IE 8.

Touch performance really sluggish on ipad, iphone and android

Testing our implementation on a mobile device (iphones, androids and ipads) has revealed that touch performance is really sluggish and not smooth as is shown (on mobile) in the demo. The ipad is better than the phones, but still not smooth. This isn't ideal and we would like to smooth this out so it responds in sync with the touch action as the demo on your website does.

Are you aware of any settings, or limitations that touch devices have with the plugin that could slow down it's touch performance, and how I can smooth it out?

Our implementation uses 180 frames at roughly ~60kb for frame file size, and the below setup

$('#my-id').spritespin({
    source: SpriteSpin.sourceArray('./img/path/to/asset_{frame}.jpg', {
        frame: [0, 179],
        digits: 3
    }),
    animate: false,
    detectSubsampling: false,
    width: 1600,
    height: 1040,
    frame: 1,
    sense: 1
});

Extending on this, reducing the number of frames down to 25 has no difference, the same with setting detectSubsampling: true.

Unfortunately I can't share a demo url as this project is under NDA, but there' is nothing fancy about our implementation, what you see above is

Sprite spin images/canvas not loading on consecutive initialisation in react.

Hi @giniedp ,

I am using sprite spin plugin in reactjs for 360 degree view of images. So the markup is basically split into various react components.

So I have a parent component which calls another child component that loads sprite spin in its div with a set of images. When we move to another view via state change, i render a new parent component which internally calls another child component which initialises the sprite spin plugin with a new array of images. Although, the images get loaded in the network, the canvas is not getting generated and if I try to access the api or data object it is undefined.

Although i destroy spritespin before initialising the second time, it seems like the older instance is not getting destroyed.

Is there any reason why this could happen? I even destroy the spritespin before initialising it the second time in the second view but still it does not work.

However, If I directly reload the 2nd view, the spritespin plugin gets initialised properly and the canvas gets rendered with the images.

Can you please provide me some ideas around why this could happen or as to what I am missing out. It would really be of great help if you could provide me with some insight around this.

Thanks.

Option "preloadCount" does not work as expected

Option preloadCount does not work as expected. Spritespin returns the whole set of images instead of preloading a subset and then call each individual frame on a draw event, which I imagine must be the use of this option.
My initialization:

     $('.spritespin').spritespin({
                source: SpriteSpin.sourceArray("path/{frame}.png", {
                    frame: [0, 120],
                    digits: -1,
                }),
                width: 400,
                height: 400,
                sense: -1,
                sizeMode: "fit",
                preloadCount: 10,
                plugins: [
                    'zoom',
                    '360',
                    'drag'
                ]
            });

DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

The path to the images is correct. Help solve the problem.

            var imags360 = {!! json_encode($image360->toArray()) !!};
            console.log(imags360);
            $('#images360').spritespin({
                source: images360,
                width: 300,
                height: 300,
                sense: -1
            });

Callback for playTo

Is there a callback function for the API playTo method? Would be useful if you want to animate sprite and then do anything after.
If there is nothing like that right now, please consider that a feature request :)

Is there method to start or stop animation interactively?

'Spin To Frame' method?

Gday,

Thanks for the plugin, it's doing a good job of creating the primary interaction i'm looking for, however i'm looking for a method to trigger the instance to spin all the way back to frame 1. Animate is set to false by default because I don't want it auto spinning.

If there is no 'spin to' method, is there a simple way I could start the auto animate process again?

The scenario I am trying to replicate is this:

Instance has 'cover' image (with other actions overlayed).
User clicks 'explore 360' to fade cover image (and other actions) and enable and focus on spritespin instance
panel has 'close' button to return back to cover image, but I need it to spin back to frame 1 before the cover fades back in.

playto mentioned frame number & lane number in3DView

I observed that the playto function animates to the instance of corresponding frame number, i am using spritespin 3D View and want to playto a corresponding frame and lane number combination, how to achieve the same?

jQuery 3 compatibility

bind() and unbind() have been deprecated.
But a very quick replace with their substitutes on() & off() seems to work fine in my limited testing.

TheScienceMuseum@6961175

(Welcome to PR if you don't mind losing compatibility pre $1.7)

Browser locks up (no scroll) when DOM is updated with stage and canvas elements

I'm running into a bit of a problem where as the plugin initialises, it loads all the images but then locks up the browser and I can't scroll until it's updated the DOM and injected the spritespin-stage and spritespin-canvas elements. Other elements that animate (in or out of viewport) also freeze in the last DOM update state.

I have 225 frames, each ~53kb so a total of about 12mb. Given the weight, i'm not initialising the instance on page load, but waiting until the user has reached it near enough. I've notice that it doesn't happen, or isn't as noticeable if I reduce the number of frames. but it still happens. It happens regardless of whether i init on page load, or on scroll.

I also don't have a visible loading indicator (not by choice - side question: how do I get this in there?) and could this be part of the problem?

Have you experienced this before, and if so what would be the best method to stop it occurring, or debug why the SpriteSpin is locking up the browser when the new markup is being injected.

How to disable the drag behavior?

I removed te drag behavior but the animation is still draggable. How to disbale this effect??

is it possible to load the first frame image then start to load the others

I have encountered an issue that if the image frames are of bigger size (let's say 200KB per image), and if there are 30 images to load inside the spritespin source, it will really take some time to finally see the images appear on the webpage. So I am wondering is it possible the webpage will load the first frame image, so we can see the image appears then it load all the remaining. (like the browser finishes rendering the first image with the DOM, then start to load the other images to append into the DOM).

Thanks

{Request} publish on NPM

It would be a nice option to have! At least for me :)

First frame remains stuck + leftovers + how to resize?

Hello I really like this script but I have some problems with it. Firstly it works perfect on th deesktop on chrome browser. I only have problem when I display it on the mobile. I'm currently developping an app with phonegap (framework based on html, css and javascript) and I'm facing some problems when displaying the sprite:

The first frame doesn't clear and if I use a transparent spritesheet (.png) the first frame is displaying under the animation. (this thing doesn't happends on desktop)
The script doesn't seem to calculate well the frames because on mobile and also on desktop you can see some leftover parts on top and right of the animation
How to scale the image? For example it should be always 30% of the width of the screen and its corresponding height? (or vice-versa)
I tried setting some css values but it seems they're working in desktop but not on the mobile device where it cuts the animation on right and down parts.
$(".win-animation").css({'top':'140px','position':'absolute', 'width':'100%', 'height':'50%'});

this is my code:
$(".win-animation").spritespin({
source : "img/mmmm.png", // path to sprite sheet
width : 200, // width in pixels of the window/frame
height : 163, // height in pixels of the window/frame
frames : 14, // total number of frames
framesX : 5, // number of frames in one row inside the spritesheet
frameTime: 60,
behavior: 'drag'
});

This is a video I made showing my problems on desktop and on the phone:
https://www.youtube.com/watch?v=fORpKF9edQc&list=UUcGZQ1LZBPIeDTvnv1y6RnA

I have a pretty big spritesheet and I would like to use canvas as in spritespin script so it'll run fast also on mobile devices.

Any help is appreciated!

If a different starting frame is specified, the initial opening spin doesn't go all the way round

It seems that it spins back to the initial frame, which may not be very far at all.

Is this a bug? Is there a way to work around this?

Canvas ist empty at only one image

if wie have only one image at source, the canvas is empty...

I fill the source by PHP and sometimes only one image is displayed.

is it possible to zoom in/out the images and spin the images

Hi, we are using this spritespin to show a set of images on iPhone. It works perfect to have a 360 degree view when we scroll left/right on the phone screen. But right now we want to zoom in/out and spin the images, is it possible for spritespin to achieve this kind of effects?

PS, we have tried the plugin of zoom, but it only zoom in the ONLY image which you double clicked, can not spin this set of images any more under this situation.

Thanks a lot in advance for any kind instructions.

And here an example screenshot: https://drive.google.com/file/d/0B_Qkr4yLh_fjbDlRemhsajRPc3M/view?usp=sharing

Do you have any idea why this could happen and how to avoid it?

Issues with old jQuery versions (1.4.4)

In order to make it work in jQuery 1.4.4, I had to remove line 41:
.on('selectstart', false);

[enhancement] Add missing bower.json.

Hey, maintainer(s) of giniedp/spritespin!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library giniedp/spritespin is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "giniedp/spritespin",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

restart first animation

Hi,

after loading, we see one animation around 360 degree and the stop it - fine...

It´s possible to start the small animation again?

 $("#mmSpriteSpin").spritespin({
                        // path to the source images.
                        source: <?= $strPaths ?>,
                        width: 400,   // width in pixels of the window/frame
                        height: 400,   // height in pixels of the window/frame
                        loop: false, // If true loops the animation
                        sense: -1     // Interaction sensitivity used by behavior implementations
                    })
// eg
$('#myAnimateButton').click({function()
      $("#mmSpriteSpin").spritespin({countAnimations: 1}); //Number set the number of "rounds"
});

giniedp / spritespin Goto Github PK

spritespin's Introduction

spritespin's People

Contributors

Stargazers

Watchers

Forkers

spritespin's Issues

Hey, maintainer(s) of giniedp/spritespin!

Recommend Projects

Recommend Topics

Recommend Org

Jobs