• Stars
    star
    378
  • Rank 113,272 (Top 3 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created almost 11 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

#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

More Repositories

1

onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
JavaScript
9,544
star
2

purejs-onepage-scroll

The javascript version of the infamous jQuery One Page Scroll without relying on jQuery.
JavaScript
770
star
3

simple-text-rotator

Add a super simple rotating text to your website with little to no markup
HTML
748
star
4

loading-bar

Add a Youtube-like loading bar to all your ajax links
HTML
661
star
5

label_better

Label your form input like a boss with beautiful animation and without taking up space
JavaScript
517
star
6

flat-shadow

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
HTML
483
star
7

panorama_viewer

Embed panorama photos on your website with Panorama Viewer
JavaScript
473
star
8

wheel-menu

Add a fully customisable Path-like wheel menu button to your website
HTML
403
star
9

notify-better

An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications
JavaScript
373
star
10

tiltedpage_scroll

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
JavaScript
323
star
11

autofix_anything

Fix position of anything on your website automatically with one js call
JavaScript
314
star
12

interactive_bg

Create an interactive moving background/object that reacts to viewer's cursor
JavaScript
232
star
13

shuffle-images

The Simplest Way to shuffle through images in a Creative Way
JavaScript
212
star
14

tip_cards

Create a card layout that let your user flip through it like you see on Google Tips
JavaScript
211
star
15

zepto-onepage-scroll

Zepto One Page Scroll is the javascript version of the infamous jQuery One Page Scroll.
JavaScript
186
star
16

adaptive-modal

Create modal windows that can be morphed from anything
JavaScript
168
star
17

fancy-scroll

Add Overflow Scroll Effect like on iOS/Android but for your website
HTML
157
star
18

immersive-slider

Create an immersive slider that changes the whole container to match the viewing slide
JavaScript
138
star
19

square_menu

Create a Square-like Menu Animation for Website using jQuery and CSS3
CSS
124
star
20

fly_sidemenu

Recreate an Airbnb iOS7 App Menu Animation using CSS3 and jQuery
CSS
113
star
21

flipout_cards

Create a Dynamic Multi Level Flip Out Cards
CSS
110
star
22

fullpage-menu

Create a Full Page, Fully CSS3 Animated Menu for your Navigation with Full Page Menu
CSS
106
star
23

jumpto

A plugin that let you create a smooth jump to sub navigational menu in one JS call
JavaScript
105
star
24

zoom-scroller

Create a Subtle Zoom Animation on Images while Scrolling
JavaScript
99
star
25

let_it_snow

Create and Control a Festive Snow on Your Website using HTML5 Canvas
JavaScript
92
star
26

endpage-box

A plugin that let you add an end page box that will display when scrolled to the bottom.
HTML
86
star
27

flipping_gallery

Create a simple but beautiful 3D flipping gallery with on JS call
JavaScript
79
star
28

subscribe-better

Create a better, highly customizable subscription modal or newsletter signup window with jQuery Subscribe Better
CSS
74
star
29

planetarium

Construct an Interactive Planet and Build the Universe on your website
JavaScript
58
star
30

flipping_text

Create a ticking text intro animation for your typography.
JavaScript
55
star
31

fullpagenav

Create a fully responsive and dynamic full page navigation with one JS call
JavaScript
35
star
32

parallax-scroller

Scroll through lists with a smooth parallax effect
JavaScript
27
star
33

flatline_icon_free

180+ high quality & minimal icons webfont for Bootstrap Framework
26
star
34

endpage_next

Navigate without moving your mouse. Pull to refresh/Hold to go next functionality on the web,
JavaScript
12
star