Creating A 3D Product Viewer with jQuery Scrollr Plugin
File Size: | 8.38 KB |
---|---|
Views Total: | 9569 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.