StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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> <div id="view3d"></div> ... <script> (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<=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 >= 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 = ''; })(); </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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