Feature request.
The position will need to be based on each frame.

I'd like to have a zoom function in the Reel Plugin. This function should load a second amount of product pictures in high-resolution while zooming is startet. Perfect would be something like on ajax-zoom[dot]com.

Can we already add an handler somewhere else beside the image itself?
Something like arrows or scroll bar or another thumbnail/div.
Thank you!
Sorry for my English!

For changing a 'speed' option value, one needs to teardown the current Reel instance and run a new one. Let's add something like a "speedChange" event and be able to change the speed on-the-fly without the teardown

Feature Request: Click either half of an image to go to the next or previous frame

Similar to the navigation in some lightbox image gallery displays, make it possible to click once without dragging on either side of the image to step through the frames.

Former "Limit Playcount / Delay Closing / Callback Function / Oh my! Oh my!"

This is sort of a hybrid post as it's a bit of a start to an improvement, but there are questions in involved, and this might also entail feature requests :)

Anyway, I'm using your reel (exclusively) on the index page of a site I'm building to showcase any assortment of random dynamic reels. So here's what happens (or what I want to happen) on my page:

1. Upon page load, my code randomly chooses a reel to play.
2. The reel is initiated and plays the reel specified.
3. I play the reel any number of designated times I specify depending on the item selected to play.
4. The reel pauses or delays for a "closing" time that I specify (again, depending on the movie).
5. Once the item comes to the end of it's playcount, your script initiates a callback looking for a function that I have waiting in my window. My function initiates a teardown and reuses the same div and img tag as it's staging area to play the next randomly selected reel.

Forgive me if I missed this, but I didn't see answers or solutions to some of this already, so I began to tinker around in your reel code and was able to come up with a fix for my own needs, so I'd like to share that, but still need help with a few caveats.

First, in your file "jquery.reel.js", I added a few lines. My version can be found at the following URL, but I'll quickly point out the changed lines below:

http://israelthompson.com/dl/DIG/www/js/jquery.reel.js

Lines 101-103 I added:

  playcount:       null, // how many times to play the movie (leave null to loop infinitely)
  framestopAdj:       0, // adjustment of when  to stop the frames (if playcount and frames are specified)
  closing:            0  // closing in milliseconds (if ending the movie at specified playcount)

Lines 136-138 I added:

var playcount=0, framecount=0, framestotal=0, framestop=0;
if (opt.playcount > 0 && opt.frames > 0) { framestop = (opt.playcount * opt.frames) - opt.framestopAdj }
if (opt.closing > 0) { var closing = opt.closing };

Lines 554-573 I added:

if (frame != was) { // count each new frame
    //alert(opt.playcount)
    if (framecount == opt.frames) { // played the reel to the end
        playcount++;
        alert('played:' + playcount + '\ncurrent frames:' + framecount + '\ntotal frames:' + framestotal + '\nstop frame:' + framestop + '\nclosing delay:' + closing)
        framecount = 0;
    }
    if (framestotal == framestop) {
        alert('stop!!');
        t.trigger('stop');
        if (window.reelCallback) { reelCallback() }
    } else if (opt.playcount > 0 && playcount == opt.playcount) { 
        alert('stop!!'); 
        if (window.reelCallback) { reelCallback() }
        t.trigger('pause');
        t.trigger('stop');
        //t.trigger('teardown');
    }
    framecount++; framestotal++
}

So, my fix:

Since I couldn't figure out how or where you have provisions to tell exactly how many times the movie or reel had played or exactly when it reached the end (regardless if it's looping, running cw, or has a rebound set) or had played once, so I could stop it at any playcount I desired... I found your frames code and began to tinker.

Once I figured out how to count frames (lines 550'ish+), I then was easily able to distinguish when my movie had played.

I'm not sure if counting frames, helps everyone who uses your script, though, since I saw in your code that there were instances for rows and other types of movies. Perhaps this is a start though?

After counting frames, I then fed your script a set playcount (line 101) to get it to stop at the end. And, to actually stop the movie, I added a stop on line 563, and initiated a callback to a function I had waiting on line 564.

PROBLEM!

All of this seems to work fairly well, but I ran into a problem right off the bat with different movies and using the t.trigger('stop') and t.trigger('pause') functions at the exact frame I wanted to stop at.

I noticed that ('stop') didn't actually stop right at the frame that it was supposed to... It always went a frame or two longer then finally stopped. It seemed very precise too, depending on the movie, so I came up with a workaround for that, which I added to line 102. Also, line 136 is part of this... With this, I was able to offset the frames I was expected to play the movie, by a specified digit and initiate the t.trigger('stop') function a frame or two early. Works well, so far...

So one of my questions, is this... Is there a reason the pause and stop don't actually stop right at the frame? Is there something I can do differently to solve this?

Also, once the matter of pause/stop delay are solved, I'd love to finalize my "closing" addition I started on... I was figuring on adding a simple set timeout function based off a supplied integer (per movie) , but when tested, this is when I noticed the t.trigger('pause') function is even worse delayed than the stop function. There was no way to accurately "pause" the movie at an exact frame, then set a timeout before initiating a stop and invoking my callback.

My testing page can be seen here (with alerts between playcounts):

http://israelthompson.com/dl/DIG/www/gridinator/gridinator-perc.php

And a page that is already making use of my fixes (without the closing pause feature and no alerts) can be seen here:

http://israelthompson.com/dev/DIG/www/

Any help is appreciated, and again, please forgive me if I'm asking questions regarding matters that have already been covered.

Izz

I tried to test out my reel on my ipad and discovered a problem where you can see the sprite sheet as you cycle through the images. It doesn't have this problem on anything else. It's difficult to describe but for some reason the section of the sprite sheet doesn't take up the entire space allotted to it. Has anyone had something similar to this happen before?

Hi pisi,

I found a bug in the frame calculation in jQuery Reel v1.1.3

In this jsfiddle example I set the options { frames: 20, frame: 15 }.
Yet when initialized it shows frame 14.

When you look at the console log you'll see that at first the correct frame is used,
and right after that it jumps to the incorrect frame.

This is happening with several frame values:

frame: 4 jumps to frame 3
frame: 7 jumps to frame 6
frame: 8 jumps to frame 7
frame: 13 jumps to frame 12
frame: 15 jumps to frame 14
frame: 20 jumps to frame 19

Other values show the correct frames.
I've tested in both single row and mutli row mode, but same result.

I'm getting the same result by triggering the "frameChange" event:
$("#reel").trigger('frameChange', 15);

I want to save the current frame and row, so I can later load to the state it was saved in.
Therefore I need the correct values.

Thanks in advance!

UPDATE:
This seems to be the same issue as described by Archivist. My apologies for the duplicate.

Since jQuery 1.4.3 retrieving DOM .data on empty jQuery collection returns null. In jQuery 1.4.2 the same jQuery internally fails on using slice method on undefined.

I should either resolve the issue or elevate the minimal required version of jQuery.

I'm having this issue with the mobile devices, notably the iPhone. The transition between graphics is slow and laggy when I spin the graphic and the image is also accelerating. What could be the issue? It works fine on iPad and PC Browsers.

For example in new Firefox 4 some tests asserting sprite background shift tend to fail because I (in agreement with all other browsers so far) expect "0px", but FF4 reports "0%, which frankly isn't the same string. Similarily Opera reports colors as rgb() whereas others report hexadecimal.

Will enhance the tests by using my new QUnit extension QUny which tests for equivalents rather for equals.

I have created a web page that opens a lightbox window (in this case I used Colorbox).
The pop-up lightbox window shows the Reel animation.

I tested the page using Firefox, Safari, Opera, and Chrome and these worked fine. When I tested it on Internet Explorer 8 I had a curious result. When you drag your mouse left and outside the animation frame, the animation turns blue as IE creates a selection box around it as if selecting text on a web page for copying.

This is not really a desirable result for me, so I wondered if anyone knows of a work-around that I could use. If you have difficulty understanding the problem I have posted an example at:

http://www.new-developments.co.uk/3dviewer/

Click on the link "Click here for 3D view" to open the lightbox viewer, then drag the animation left and outside the box to see the frame turn blue. Make sure you use IE as there is no problem with other browsers.

Thank you in advance for any suggestions.

Lee,

I took the liberty to add you as a collaborator to the Reel project here on Github and will be my pleasure if you accept. As a collaborator you will be able to receive tickets informing you about an upcoming release, so that you won't receive release announcement post-release like this one ;) I promise I won't bother you and will assign you tickets just from time to time, mostly before Reel releases to ideally sync up with Formatter releases.

Very recently Reel 1.1.2 was identified to be using an .attr class name definition syntax unfortunatelly problematic and incompatible with jQuery 1.6 released just a few days ago. This weekend I've addressed this sudden issue (GH-33) and I've changed the syntax to restore the declared 1.4.2+ compatibility. The compatible version is rolled out as fresh Reel 1.1.3, which is also the latest version served by the CDN.

I don't really know whether Drupal sites are deployed with a fixed version of jQuery or if they use latest. Because if they do use the latest jQuery 1.6, your Formatter would have to be updated.

If your Formatter uses jQuery 1.5.2 or lower, just ignore this and simply close this issue. The update is neccessary only for jQuery 1.6.

Thanks for your time!

.pisi

Greg Miernicki reported an issue with large dimensions stitched non-looping panorama. There seems to be no serious error in his HTML. The pan.jpg has dimensions of 1000x738 and pan-reel is 5276x738.

When removed frames and frame to see its frame one, one can see the both edges of the panorama and horizontal shift of background is 146.556px. Even when the background shift is corrected by hand to zero, when dragged, one moves in completely opposite direction again uncovering both edges.

Also setting frames doesn't seem to have any effect on the projection when using stitched panorama.

I'm trying to entertain a "stage" area inside of a single div and replace the reel inside the div with a different reel when a link is clicked. I am passing all the correct parameters to the reel tag and the img and div elements seem to be altered by reel, but the reel never initiates.

So here is the issue:

1. Reel plays fine onload for the initial instance
2. When the div playing the reel is wiped of it's div, img, div, img (reel elements) and replaced with a new img and reel re-initiated with the new img info, the reel replaces the dom elements like it normally does and you can see the first frame of the reel, but it never starts playing.

What am I doing wrong?

Is there a way to abort or stop a reel from controlling a particular img and swap in another one with a new src, size, and other parameters?

I noticed on your sampler page, you have to "click to activate"... I guess this is similar behavior I'm attempting.

Izz

Ahoj Petr!
Thank you so much for writing this great plugin! It's working very nicely and has so many great features. :)

One question: have you had any reports about problems with conflicts with mootools? We've tried installing jquery.reel.js on a Joomla site, without entirely realizing that Mootools and jQuery would conflict. The result is that we get rotating images, but whenever there is mouse interaction, the images zoom up towards the top of the screen and simply disappear. It's actually a somewhat funny effect, because it's very... I don't know the word for it. The image just seems very eager to get to the top of the screen as quickly as possible. :)

Anyhow, we've been tinkering with settings, java libraries, and the like, and I thought I'd just drop you a note, and see if you had any ideas. When mootools-core.js is removed or renamed, the library works just fine. When they're both loaded, jquery.reel.js works mostly fine, except for when there is mouse interaction. We tried turning on/off various horizontal, vertical settings. But none of those options worked.

Any ideas? Thanks in advance for any insight you may have! :)
Abigail

In older browsers the suggestive mouse cursor does not appear because of lack of support for CSS cursor value of horizontal resize.

Using jquery 1.6.1, mousewheel from: https://github.com/brandonaaron/jquery-mousewheel
and latest jquery reel.
When performing a wheel event on the image, it tries to load 'undefined' images and it just loops trying to load an infinite number of undefined urls..

Is it possible to use a custom drag_cursor image? I changed the image paths but the new cursor is not appearing (path is correct in Net panel). It's always the failsafe_cursor. (ff3.6 mac)

(I ended up removing the source code that embeds a cursor and set it myself with css).
(NOTE: custom cursors are not supported in ff3.6 mac).

I tested both images array and image sheet. Image sheet seems to work fine.

However, images array is preferable because it seems to run much smoother, and it is less work for me to create.

First image loads, then preloading occurs (don't interrupt) - after preload is done, the image goes blank.

After it goes blank, you can grab and start dragging to rotate, but it would be great if it didn't go blank.

As I said, image sheet works fine, so I think I did everything right - I don't think I messed anything up, but it's always possible.

Any help on this issue would be greatly appreciated! This Javascript is really awesome!

I don't currently see a way that if I provided a base64 encoded image in the source for the plugin to work. This would be great as it ensures a certain level of performance because base64 images loaded immediately.

Nice new feature the multi-row possibility!
Follow me using your mini example:
when dragging the mini to the top (first row) the image locks there if you drag down vertically, only when dragging some steps horizontally it then jumps to the correct position.

Best Regards,
Oliver Pfister

I like to show just the first image in the sequence and have no auto scroll. When I set speed to 0 or delete it all together, I see no image, until I click in the empty field. The mouse has the "reel" look, but no image is showing. See:
http://thebuddhashop.net/index.html (scroll = 0.1) visible but rotating
vs
http://thebuddhashop.net/index.htm (scroll = 0) not visible until click

Former "add an option to make a animation when the reel is initialized"

hi

i would like to create an animation as soon the reel is initialized, so that the user knows that he can rotate my product. after that i want no automatic rotation, but this feature already exists. also a nice feature would be to apply the break parameter, so that the product rotates fast in the beginning and the slows down.

if you are not able to implement this feature in the close future, could you give me a hint how i could create a workaround? for example trigger a mouse move event on the reel div as soon as it is initialized.

thanks in advance

lukas

Hi!
First of all, thanks for your job!

I'd like to know if it's possible to create a link or a mappable area into one or all the images I use into the Reel.

Thx in advance

Luca

Reel has some features (indicator for example) missing in jQuery 1.6. Otherwise functionaly is OK.

In Chrome on MacOS when a CSS border is applied to the image its own scrolling performance significantly decreases.

Jeries Hanoun recently reported: "I noticed that something changed a few days ago on your new script that broke IE's "play" ability."

Thanks Jeries, IE is a real bitch. I will do my best to nail this issue down ASAP.

Hi pisi,

I'm developing app on the iPad. I put reel on top the scrollable area. When I touch and move reel to spin, the scrollable area try to move too.

So, I edit the source of reel.js (latest 1.1.3). At the down and slide function, I add ...
e.preventDefault();
e.stopPropagation();

But reel does not stop propagate touch event to the scrollable area. Please advice, thanks.
Jirawat

...loading the data from an encoded video file where each frame represents one image. ANY video codec is orders of magnitude more efficient than an image sequence. Example: the mini car sequence, normally 2.5MB, is just 300Kb compressed at 1Mbps (which is overkill for a 300x300 frame size).

On top of everything, the relatively simple nature of movement gives the encoding efficiency an additional boost.

As for decoding a video file with JavaScript, it's been done before!

When using an array of images with the "images" option, specifying the starting "frame" option does not work reliably. With or without the "frame" option, Reel doesn't seem to know what to use as a starting frame. I'd prefer to just leave it blank but the image shows up blank/missing then to begin with until the user interacts with it enough to change the image.

Hi, I have a Reel instance that I'm using in an iPhone-specific site. The image is 320x240 px, which occupies a fair amount of screen space. I'm unable to swipe vertically on the image to scroll the page up and down.

Two users independently reported a unpleasant behavior of new image sequence feature in 1.1. When frames are being loaded, the very first one isn't displayed when loading is finished.

Please vote for this issue if it bugs you too!

Hi,

Very & very nice tool!

For the 360° Stitched Panorama it would be nice to be able to get the rotation angle for imaginary line at center of panorama frame (as the stitched image is scrolled/rotated).
Somebody could use the returned rotation value for building a "radar" on a map or at least define a caption with cardinal directions.

It would be also nice to be able to define where the panorama is opened (let say rotate at 45° where if panorama covers 360°, 0° is the left side and 360° is right side of stitched image): a good reason for having this is that not always the center of panorama is the most interesting part.

All the best,
Adorian

hi

i use the following code:

$('#reel').reel({
    clickfree: true,
    delay: 1,
    frame: 1,
    speed: 0.2,
    path:    '/images/',
    images:  ['test1.png',
            'test2.png',
            'test3.png']
});

after all images are loaded, the reel disappears. instead of the first frame the transparent gif palceholder is being inserted.

am i doing something wrong?

thanks

lukas

Greg would like to split the current shared sensitivity option into two - one for dragging and one for wheeling.

Hi!
I need to use the area option because on iphone and android if you zoom to almost fullscreen the part of the page with the reel-image then you can not move the page up or down, because the pinch to move is disabled over the image. I would like to reduce the area sensitive inside the image to solve this problem.

Can you help me to use the area option? I didn't found any example or guide to use this option :(

Thanks very much, your work is wonderful, best regards from Italy!

Olivier de Broqueville expressed an idea to improve preloading of images by changing the order of loading the frames. He suggested loading the very first image, then the ones to the left and right and progressively continue.

For example (36 frames total, first frame is 1) the loading order would be:

1, 2, 36, 3, 35, 4, 34, 5, 33, 6, 32, 7, 31, 8, 30...

Please vote for this issue!

In Google Chrome users of the Apple Mighty Mouse may experience a overdone reaction on mouse ball scrolling.

Hi all.
I'm trying to connect this .reel-plugin to my j360-plugin to make my 360 degree images scrollable with the mouse. Also I'm trying to create the nice effect The Panorama-image on the demonstration-page has, but I fear I might have too little experience in jQuery to really know what i'm doing.

anyone want to help?

hi

i have a set of 16 photos which is really not enough to get a smooth reel experience. a fade between the two images would really improve this. maybe we also could include a option for the duration of this animation. if you can point in some direction where to implement this i could also try my luck.

thanks

lukas

Currently, the rows option defaults to 0 (single row).

The problem is that by default, the reels I am testing only display 6 images from my sprite. Even when I set frames to the correct value, still only 6 are displayed. I finally figured out I had to change footage to the same as frames. Shouldn't footage be automatically set to frames if rows = 0?

Simon.

Even when James Dempster's latest version (1.1) of disableTextSelect is applied on the hotspot, the Reel projector instance can still be text-selected by pressing the screen and holding for some time (long click) on iPhone. On desktops it works fine.

It is best tested on the iPhone example

James' demo however works quite fine on iPhone and blocks the selection.

Reel on iPhone sets display: none to the original image even when saves is true. So the reel container is then completely empty (in DOM point of view) - no image, no text. And still it selects the whole container.

How can the text-selection on iPhone be avoided? Any ideas? James? Anybody?

Hi
Firstly, thanks for your great work here - also congrats on the excellent documentation - a pleasure to work with.
I've made a Drupal module that packages this plugin as a formatter for image fields in Drupal 7.
The content author has to upload two images, one for the static, one for the reel sprite - they can choose their config options (a limited set) using the ui and then get some jquery reel goodness on their page.
Would you consider linking to the Drupal project from your site?
http://drupal.org/project/reel
Demo here: http://www.thebronxbrewery.com/node/41 - although this might be taken down at some stage, we'll get a demo link up from the project page in which case.
Lee

Hello there, I revisited the script after a few weeks I found my self troubled by the fact that the panorama (stitched) doesn't loop anymore, including the example on your website.

Here's a test:
http://www.greekhome.gr/demo/gr/panorama.php

Uppon reaching the far right end of the image, the script will jump again to the 1st frame instead of contuining (looping / stitching) the image. The same occurs if you scroll to the left end, which brings you again the last frame.

Let me know :)
Best regards,
Elissaios Koumridis.

I'm using an Array defined with "images:" - I have JPGs named 01 through 41. Incomplete loop ("loops: false"), frames defined as 41 "frames: 41" and frame for starting defined as frame 21 ("frame: 21").

My img that the reel uses is "21" so "21" loads on the page first, and then the reel starts loading.

However, when the reel is finished loading, it sets itself to starting image 20, the wrong one.

If I try to "solve" the problem by cheating and specify "frame: 22" in order to get the offset of -1 and the correct start frame 21, the cheat will work, however, there will be a brief flicker of the wrong image, which is not good.

I hope you can fix this! I really need this before I can add this feature to my website.

I have a problem with this plugin.
When I try to use it the first time everything is perfect but when I try to use it later without refreshing the page does not work ...
Anyone know why?

My code:

WEB.REELPAGE.open = function(){
$('#main').load('sneakers.html',function(){
$('.imageReel').reel({
delay: 0,
speed: 0.5,
path: 'img/',
cw: true,
images: ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png']
});
})
};

sneakers.html contains only one image with this attributes class='imageReel' and src='img/sneakers/centennial_mid/element/360/1.png'

Hi pisi,

Would you please help me? I created the reel then spin it to a random frame and hide it. When I show it again I want to refresh the reel to go to the first frame. I know how to get the data from the reel but I'm not sure how to set the data back to it.

Thanks in advance,
Jirawat

Launching a rotating image in Fancybox works the first time, but once the Fancybox is closed and opened again, a static image is all that is shown.

Hi there,
I just tried using the 'images' option to build the 360 view with individual images.

Here is an extract of my HTML:

Here is my jQuery code:
$(function(){
$('#imageReel').reel({hint: 'test', path: 'images/sequences/', images:
[
'reel-01.jpg',
'reel-02.jpg',
'reel-03.jpg',
'reel-04.jpg'
]
});
});

For some reason, when the reel first loads, my original initial image gets replaced by some image meta data. Here is a result:

This only happens for individual images. I managed to find a way around by including the 'frame' option but it cannot be values 1,2 or 3 for some weird reason. So I'm using either frame:0 or frame:4 option to get the reel to work as it should.

I've also tried using the 'image' option but there were no difference. From the description I still don't quite understand what the 'image' option does.

It would be great to have a 360 view example for using individual images.

Lastly, the latest 1.1 improvements are very cool!
Thanks for improving on this awesome plugin.