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

Overview

#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

Comments
  • lost images when autoplay is true

    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

    opened by jkkheni 0
  • Object remains dragable if mouse released outside frame

    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.

    opened by psyantyst 0
  • More than one ?

    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

    opened by Oreip 3
  • Leak on iPad when using jQuery 2.0.3

    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.

    opened by samuelnee 0
  • Wordpress implementation

    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.

    opened by Ragevortex 0
Releases(v1.0)
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Dec 21, 2022
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
an open-source package to make it easy and simple to work with RabbitMQ's RPC ( Remote Procedure Call )

RabbitMQ Easy RPC (Remote Procedure Call ) The Node.js's RabbitMQ Easy RPC Library rabbitmq-easy-RPC is an easy to use npm package for rabbitMQ's RPC

Ali Amjad 4 Sep 22, 2022
1on1 call demo using Chime SDK meetings, Next.js, AppSync, and CDK!

Chime SDK Meetings 1on1 call demo with Next.js / AppSync / CDK This is a sample project to demonstrate Chime SDK meetings for one-on-one call with Nex

AWS Samples 4 Dec 15, 2022
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Lily Scott 3 Feb 28, 2022
fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

fcall, fetch and call any remote hot functions, anywhere, anytime, without installations or configurations.

立党 Lidang 4 Sep 20, 2022
100% type-safe query builder for node-postgres :: Generated types, call any function, tree-shakable, implicit type casts, and more

⚠️ This library is currently in alpha. Contributors wanted! tusken Postgres client from a galaxy far, far away. your database is the source-of-truth f

alloc 54 Dec 29, 2022
In this project I'll use Asynchronous Javascript to call an API and set the leaderboard of the best players.

Leaderboard Project In this project I'll use Asynchronous Javascript to call an API and set the leaderboard of the best players. The main goals of thi

Oscar Fernández Muñoz 4 Oct 17, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
The invoker based on event model provides an elegant way to call your methods in another container via promisify functions

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions. (like child-processes, iframe, web worker etc).

尹挚 7 Dec 29, 2022
Minimal web3 implementation: call eth contracts directly from JS

micro-web3 Minimal web3 implementation: call eth contracts directly from JS Connect to any web3 server: host your own with execution layer client, or

Paul Miller 46 Dec 29, 2022
⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ ?? Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

Morpho Labs 20 Dec 30, 2022
ESLint plugin to disallow the optional-call operator

ESLint Plugin: no-optional-call Overview The no-optional-call ESLint plugin provides a single rule (non-configurable) that disallows any usage of the

Kyle Simpson 15 Sep 24, 2022
A Stacks DeFi app that automates covered call writing to generate sustainable, risk-adjusted yield.

?? Options Vault ?? A Stacks DeFi app that automates covered call writing to generate sustainable, risk-adjusted yield. Options vaults allow you to al

null 15 Nov 16, 2022