Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's some javascript I just threw together. Pick one of the pre-built libraries (for browser compatibility etc etc) but when you get a chance dig into what is actually happening. <strong>note</strong> I wrote this in the answer submit form so there may be syntax and other errors</p> <pre><code>&lt;!-- an empty div to hold your images / frames --&gt; &lt;div id="view3d"&gt;&lt;/div&gt; ... &lt;script&gt; (function() { // setup var viewer = document.getElementById("view3d"); var name = "3d Boat"; var frameUri = "/images/demo3d.#.jpg"; var frameStart = 1; var frameEnd = 100; // setup the html IMG's for(var i=frameStart; i&lt;=frameEnd; i++) { var img = document.createElement("img"); img.src = frameUri.replace("#", i); img.alt = name; img.style.display = "none"; viewer.appendChild(img); } // persisted variables and events var that = this; this.rotateX = 0; this.isRotating = false; this.frames = viewer.getElementsByTagName("img"); this.frameIdx = 0; this.pixelsPerFrame = viewer.offsetWidth / (frames.length / 2); function rotateMouseUp() { isRotating = false; }; function rotateMouseDown(event) { mouseX = event.pageX; isRotating = true; }; function rotateMouseMove(event) { if(!this.isRotating) return; var x = event.pageX; var delta = this.rotateX - x; if(delta &gt;= this.pixelsPerFrame) { this.rotateX = x; this.frames[this.frameIdx].style.display = 'none'; this.frameIdx = (this.frameIdx + parseInt(delta / pixelsPerFrame)) % this.frames.length; this.frames[this.frameIdx].style.display = ''; } } viewer.onmousedown = rotateMouseDown.bind(that); viewer.onmouseup = rotateMouseUp.bind(that); viewer.onmousemove = rotateMouseMove.bind(that); // show the first image this.frames[this.frameIdx].style.display = ''; })(); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload