Creating A 3D Product Viewer with jQuery Scrollr Plugin

File Size: 8.38 KB
Views Total: 9504
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

1. Include necessary javascript library files in the page.

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></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.

$(document).ready(function() {


// 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
    images: imagesArray,
    frames: 17,
    distance: 3000

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

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 (!/PreloadJS)
preload = new createjs.LoadQueue(true, "");

preload.addEventListener("progress", handleProgress);
preload.addEventListener("complete", handleComplete);

function handleProgress(event) {

function handleComplete(event) {


Change log:


  • styling adjustments


  • lots of fixes and added css


  • 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.