peachananr / interactive_3d Goto Github PK

Create a 3D interactive object using images and one simple JS call

Home Page: http://peachananr.github.io/interactive_3d/demo/interactive_3d.html

License: GNU General Public License v2.0

JavaScript 100.00%

interactive_3d's Introduction

#Interactive 3D by Pete R. Create a 3D interactive object using images and one simple JS call Created by Pete R., Founder of BucketListly

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Have not test on IE.

Basic Usage

jQuery Interactive 3D let you create a 3D interactive object using several images as frames allowing the user to drag around and manipulate the image. This plugin is perfect for showcasing your product on the web.

To add this to your website, simply include the latest jQuery library together with jquery.interactive_3d.js into your document's <head>, create a markup and call the function as follows:

<body>
  ...
  <div id="interactive_3d">
    <img src="images/frame_1.png">
  </div>
  ...
</body>

Note: Make sure that the images that will be used as frames have a file name that ends with _frame-number. For example, your first frame should be named: anything_1.jpg and your second should be anything_2.jpg etc.

Now call the function and that should be it.

  $("#interactive_3d").interactive_3d({
    frames: 10, // The total number of images to be used as frames. The higher, the smoother your interaction will be. The default value is 10 frames.
    cursor: "move", // The CSS style to indicate what cursor will show when the user hover the object. The default value is "move"
    speed: 0, // The speed of the rotation in milliseconds delay. If you have small number of frames and the rotation seems too fast and not smooth, increase this value to 50 - 100 milliseconds delay. The default value is 0.
    entrance: true, // Entrance Animation. Toggle this to false to turn it off. The default value is true.
    preloadImages: true, // Let the script preload all the frames on initial load. Toggle this to false to turn it off. The default value is true.
    touchSupport: true, // The script support touch events for mobile phones. If this interferes with your website behaviour, you can toggle this to false. The default value is true.
    loading: "Loading..", // This only applies if preloadImages is true. This option let you show a loading indicator while the script is preloading the images. The option accepts HTML. Toggle this to false to turn this off. The default value is "Loading.."
    autoPlay: false // This option will superseded entrance option. The 3D object will start rotating automatically if autoPlay is not false. This option accepts the speed of the rotation in milliseconds delay. The default value is false.
  });

With one JS call, you will now have an awesome 3D interactive images on your website. Pretty neat huh? A big shout out to Chris Coyier for providing a lean solution for drag and drop without using jQuery UI and thanks to the owner of touchHandler script (not sure who the author was. The original post was on a lost Posterous server) to add touch support to the drag and drop script.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

interactive_3d's People

Stargazers

Watchers

Forkers

davgit waltercassiano bigbadleroybrown nunodotferreira owtp midweststudios davimascarenhas jamf24 savantos marviljoy jihoon-kong royjulien tbrown32 jvmonjo iliyaskhan newiclus nvdnkpr fabienb av2d2 devluis sbn78 andreishapa leison williangringo konstantinos-tsatsarounos alanin fecori ahmedfawzy maxbye3 ideesimple spawnrider apatche7 idmeneo prabhic sujanthakare jordan-carl kimil deivisonarthur yufi113 shotishu a4thaddee yuzin81 betowebti toddrkeller angelomarsanz jorislib keconley brenothales junhoek openube cybernatics naruco halkibsi omginteractiv svewf uxscripts openux alejoalzate abiodun gabrielcury jasonleewilson nordeveloper acefxlabs mqxerror agiza jamgdm willyciaps jwight1234 zenseo alanghans leonidche byeloff carabina willyci sisihuisi isc-labs kevinrodbe langgege jsswebsolutions gaurav-sharma-jss iannwu joneswoodco sinabio karimabdul palimadra guzuomuse ngari chrisemoulton deawx puhrome arsen3d casparov-man sshyran nitishakalwadi soroka41 anotherankor rtruncali davidhavrilyuk jonket qinpengwei

interactive_3d's Issues

More than one ?

Hi there !

You have done a really great job with this Interactive 3D script.

I try to have more than one turnable object, but if I add one more, I have an issue : I can turn the first object (or the second), but when I turn the other, the first one turn too.

One solution is to do a new script, and change names. But if we want something like 10 turnable objects, it's a little bit onerous..

Do know this issue ? Do you have solution ?

Thank you for reading,

Peter

Image capturing

Can you please tell that at what angle did you take pictures and also by which device?

lost images when autoplay is true

i have one bug in my demo when i run my code in autoplay mode it goes out of number of frame. if i have 50 frame and set frame:50 and i run code animation is goes to 51,52,53,.. images which i have not. i have only 50 images. that's why animation blink

Object remains dragable if mouse released outside frame

Releasing the mouse outside the frame will cause the object to remain dragable. This behaviour is cleared only if the button is released within the frame.

Wordpress implementation

Hi there. I've been trying to implement this in my wordpress site to no avail. I know the script works in regular html. For some reason its just not working for me in wordpress.
I added the js calls in the head of the template as I usually do with such things. Used the direct link for the image in the div and placed it in the article as I'd like it to appear. It gives me the following error:
Uncaught TypeError: Cannot call method 'split' of undefined
any help with this would be greatly appeciated.

Touch optimization would be awesome

Now object can't be rotated on mobile, rotating by swiping on mobile could be awesome feature. Can it be implemented?

Leak on iPad when using jQuery 2.0.3

Since $drag.parents().on("mousemove") is added on every "mousedown", the plugin was eventually stopping in the browser (especially iPad). Adding $drag.parents().off('mousemove') in $(".draggable").on("mouseup") seemed to do the trick for me. Maybe move this to a delegated event?

Setting the setTimeout's to a local variable and then using clearTimeout before the logic seemed to help as well.

Use mouse movement or coordinates instead of dragging?

Hello, there is a way to control the animation using the mouse position/movement and not dragging?
I'm not an advanced programmer, maybe there are a few couple of code lines that can tell the cursor coordinates to control if the image es spinning to the left or to the right.

Thanks!