Creating A 3D Product Viewer with jQuery Scrollr Plugin

Scrollr is a jQuery plugin that provides a 3D view for your product by scrolling or dragging through an array of product images. Similar to the frame by frame animations.

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
• jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
• AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
• jQuery Plugin For Draggable 360 Degrees Product Image View - j360
• Super Tiny jQuery 360 Degrees Product Image Viewer

How to use it:

1. Include necessary javascript library files in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/jquery.hammer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/PreloadJS/0.4.1/preloadjs.min.js"></script>
<script src="jquery.scrollr.js"></script>

2. Create the html for the product viewer with image preload support.

<div id="images">
<h1>Loading images, please wait<br>
<span id="percent"></span>%</h1>
<div class="goto" data-frame="1">Go to start</div>
<div class="goto goto2" data-frame="17">Go to end</div>
<img src="" alt="" id="image"> </div>

3. The javascript.

<script>
$(document).ready(function() {

$('#image').hide();

// Create the array for scrollr (and PreloadJS)
var imagesArray = new Array;
for (var i = 1; i <= 17; i++) {
imagesArray[i] = "images/" + i + ".png";
}

// Init plugin
$("#image").scrollr({
    images: imagesArray,
    frames: 17,
    distance: 3000
});

// Go to frame
$('.goto').on("click", function(event) {
event.preventDefault();

var getFrame = $(this).data('frame');

// Scrollr public method: go to a frame
$('#image').scrollr('goToFrame', getFrame);
});

// We need to preload the images
// You can use whatever method you want
// In this case i have used PreloadJS (http://www.createjs.com/#!/PreloadJS)
preload = new createjs.LoadQueue(true, "");

preload.addEventListener("progress", handleProgress);
preload.addEventListener("complete", handleComplete);
preload.setMaxConnections(10);
preload.loadManifest(imagesArray);

function handleProgress(event) {
$('#percent').text(Math.round(event.loaded*100));
}

function handleComplete(event) {
$('#image').fadeIn();
}
});

</script>

Change log:

2014-03-12

• styling adjustments

2014-03-11

• lots of fixes and added css

2014-01-29

• minor fixes
• add a standalone version that doesn't use TweenMax or hammer.js

---

This awesome jQuery plugin is developed by robbue. For more Advanced Usages, please check the demo page or visit the official website.