3D object frame by frame with jQuery reel


(mariano_zafra) #1

Hi guys,

I want to share this pretty, easy and powerful discovery. We can have a 3d object in Hype only embedding jquery and jquery reel plugin. rotation_3d.zip (321.0 KB)
You can see other example here 3D CAR
Five steps:

  1. Embed JQuery and JQuery Reel. Is important the order: first JQuery, second JQuery Reel.
  2. Drag all the images to the library
  3. Create a rectangle with this code:
    img id=“image” src="${resourcesFolderName}/DSCN0691.JPG" width=“210” height=“186”

I don´t know why, but it only works if the id is given in the object, not in the info panel.

4 Create a js function

$(’#image’).reel({
images: ‘${resourcesFolderName}/DSCN####.JPG|691…702’
});

5 Enjoy and excuse me for my english.


(Greg) #2

Thanks Mariano, nice and easy to use… YAY!!!


(strmiska) #3

this is cool - thanx


(Hans-Gerd Claßen) #4

Hi,

btw, you can achieve this with just hype without any custom code nor library.3dRotateHype.hype.zip (249.0 KB)


(mariano_zafra) #5

Of course, but you can’t achieve vertical and diagonal scroll like this:

http://www.elinfografista.es/coche/coche.html

Here you are all the posibilities of this plugin

http://test.vostrel.net/jquery.reel/example/index.html


(Hans-Gerd Claßen) #6

sure :slight_smile: it’s just: as long as you can rely on Hypes’ tools, it’s the better way to go :slight_smile:


(mariano_zafra) #7

Yes, sure! It’s only a little help :angel:


(kerguelen) #8

Hi Mario,
I gave another way to do this here :

Thanks by the way !!


(Jessica) #9

I’m playing around with this plug-in and really liking it. Have you tried adding annotations like one of the samples shows? I’d love to do that but just can’t figure it out. Thanks in advance! This is the sample I was referencing:
http://test.vostrel.net/jquery.reel/example/panorama-orientable-stitched/


#10

Since Hype lets you embed HTML widgets (frames) there’s no reason why this wouldn’t work. I recommend using their sample code and embedding it within an HTML widget and working from there.


#11

Hi Jessica,

I explained this same plug in in another post recently

in order for it to work well within Hype. I used the Javascript version rather than use the classes.

To add annotations to the script I already used. You would just add the following argument:

annotations: { annotation_1: { x: 30, y: 30, link: { text: 'Link', href: '#' } } }

D


(Jessica) #12

Thanks so much! I’ll check this out.


#13

reelJS-panoramic.hype.zip (63.6 KB)

This should help you :wink:

D


(Jessica) #14

This helps tremendously!! Thank you so much!