On the iPad gallery at http://movies.apple.com/ipad/gallery/ there is a nifty 3D-ish view when you click on the "360°"-Button on the lower right. It seems to be built with Prototype, some custom JS and 180 single JPEGs.
Now, I don't want to steal Apple's code, but I really would like to have a similar effect. I'm afraid recreating the effect all by myself would be too much for me, so
has anybody ever done something like this and released it as open source (or a paid library or something like this)? Integration with jQuery would be an added bonus.
How about this:
Reel is a jQuery plugin which takes an
image tag and makes it a live
"projection" of pre-built animation
frames sequence. Its aim is to provide
a 360° view of something or someplace.
Great alternative to widely used Flash
techniques.
Maybe what heporap is trying to say is: construct the 3D VR effect in the same way you might make a slider animation.
I guess a slider changes the position of an image in relation to where a mouse cursor is positioned so...
Perhaps try changing the IMG tag's SRC attribute on document.onmousemove and object.onmousedown for drag/positioning effect?
Maybe that sounds obvious, and I'm no maverick coder but it's a start...
I know its an old thread, but its still high on google result.
Here is a jQuery plugin that does exactly that effect http://giniedp.github.com/spritespin/
you better try out threesixty: http://www.mathieusavard.info/threesixty/
You may make it like a slider to change image's src.
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_172.jpg
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_135.jpg
Try this one with zoom: http://www.ajax-zoom.com/examples/example15.php
Or use this one. It's also Javascript but with curves for slowing down and another kinds of zoom functions.
Related
I need to make a vertical javascript timeline like below link which is now created with flash.
Can someone give me a reference plugin? Or kindly advice me is it possible with plane javascript or javascript frameworks. I have little bit idea about plane javascript and jquery.
http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
I did some research on it. But did't get any good result.
Thanks in advance.
https://github.com/balancemedia/Timeline
Demo: http://builtbybalance.com/github-timeline/
there could be some more: https://github.com/search?langOverride=&language=JavaScript&q=timeline&repo=&start_value=1&type=Repositories
A good tutorial:
http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html
the whole thing is done in flash. you can achieve this in javascript(definitely with css), but there is not straight forward method for it. Even in flash it wasn't done in a straight forward method. It took some efforts to sync the movements of the timeline and the events path. start with developing custom scroll bar using javascript and css, and then develop the rest.
I was wondering if there is a way to change an image color scale in JavaScript? Say you want to make it warmer or cooler depending upon the user's input. If there is a way in jquery or html5 that would be fine as well. Anyone know how to accomplish something like this?
HTML 5 has lot more features than what you just looking for. Anyhow the CANVAS container is the solution that i could say, where you can play with the color, pixels of image. . Have a look at this this. Hope this can help you to start
Maybe not in jquery itself but there is very cool js library for manipulating images called pixastic.
http://www.pixastic.com/
Try to search documentation for option you need exactly.
My guess is you want to change the saturation. I tried Pixastic but it's broken in my browsers, Chrome, Opera and IE7.
Caman JS looks like it delivers, at least judging from the demo page
http://camanjs.com/examples
Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.
i need to replace my old FLASH panorama viewer by a jquery/javascript version.
If you check, you will see that the walls/corners/edges are rounded so you seee it normal when you apply the panorama effect,
the problem is that with all the jquery panorama plugins i get this resutl: http://toniweb.us/m/demos/salleformation.html (the image is only left animated. So the rounded, still rounded)
Do you know any good solution that can work with this kind of images?
PS: what is this format name?
Did you try also http://jquery.vostrel.cz/reel ? But I fear not a solution for your specific problem.
So you could try this site, carefully reading its stuff: http://webuser.fh-furtwangen.de/~dersch/mp/MotionPanoramas.html
I just came across this plugin. You'll be needing something like this (though it's far from perfect) :
http://code.google.com/p/jspanoviewer/
First off, I am currently using JQuery so JQuery solutions viable.
I want to rotate an image by a dynamic X degrees which is calculated every sec.
Now I had this working perfectly using this JqueryRotate plugin
The image is rotated perfectly every sec. But I am trying something a little more complicated now.
I want to rotate 4 transparent images on top of each other. Currently I have four <img> tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.
So, What is a good library / plugin or way of rotating an Image whilst keeping transparency?*
Must work in Opera, Safari, Chrome, Firefox and IE8+
I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.
Raphael is a great library that works in IE (with VML) and other browsers (with SVG). It can rotate images and deal with transparency.
I don't know of any other way to deal with IE. CSS solutions are quite easy, but they don't work in IE.
Another option is to simulate image rotation with CSS sprites (the example does a simulated 3d rotatoin, but 2d is just as easy).
Well it might work even with jQueryRotate plugin, have you asked author (me) about this ? :P I dont read stackoverflow so often to answer that kind of requests :)
You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.
If you were willing to live with the plugin requirement, Canvas should make your job easy.
Your best chance is to use canvas and use the IE canvas hack.
The CSS rotate for IE, like most other hacks for IE, uses the filter property, which will almost certainly interfere with the filter hack that's used for transparent images and the filter hack for changing opacity.
The canvas hack, on the other hand, uses native VML instead, which handles everything you need.
http://code.google.com/p/explorercanvas/
I don't know how performant it is, so your mileage may vary there.