360 Degrees Product Viewer
April 13, 2016 | 32 Feedbacks

360 Degrees Product Viewer

A simple, interactive resource that can be used to provide a virtual tour of your product.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

In e-commerce design, one of the main goals is to fill the gap between product and user. This is particularly relevant for high-priced goods. Hence, the importance to integrate interactive tools, to provide the user a way to “virtually experience” the product.

Today’s resource is a simple, interactive resource that can be used to show a virtual tour of the product. The idea behind the snippet is to use an image sprite and link the dragging to a specific frame of that image. You can use it to show the exterior of a technology gadget (or a car, like in our demo!), or, in general, to create fancy product animations.

Photo credits: Alfa Romeo.

Creating the structure

The HTML structure is composed of two main elements: a figure.product-viewer for the image sprite and the product preview image, and a div.cd-product-viewer-handle for the viewer handle.

The data-frame attribute of the div.cd-product-viewer-wrapper specifies the number of frames the image sprite is composed of, while the data-friction specifies the friction while dragging on the image (it has to be greater than zero).

Adding style

The <img> element is visible only at the beginning, while the image sprite is still loading, and is used to give the proper dimensions to the figure.product-viewer element.
As for the div.product-sprite, it has an absolute position, a height of 100% and width of 1600% (our image sprite is composed of 16 frames) and is hidden by default. The .loaded class is then used to show the div.product-sprite once the image sprite has been loaded:

When the user drags the span.handle or the product image, we change the div.product-sprite translateX value to show a different image frame (using JavaScript).

Note: the frames composing your image sprite should have the same aspect ratio of the product preview image.

The handle loading effect is achieved by changing the scaleX value of the span.fill element (using JavaScript); once the image sprite has been loaded, the span.fill is hidden and the span.handle is shown:

Events handling

To implement the product viewer, we created a productViewer object and used the loadFrames method to check whether the image sprite has been loaded:

Once the image sprite has been loaded, we attach an event handler for the mousedown/mousemove/mouseup events to the proper elements:

For this effect to work on touch devices, we used the vmousedown/vmousemove/vmouseup events provided by the jQuery mobile framework.


Jul 15, 2016
  • Fixed bug when image takes longer to load
Apr 29, 2016
  • Fixed bug with cached images
Apr 13, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Tofanelli

    Mind for an addition? Rotate from top to bottom…. so it would be a full view from the product =D

    • http://codyhouse.co/ Sebastiano Guerriero

      Hey there! That’s an interesting idea for a future update ;)

      • Tofanelli

        Superb!! Waiting for this one =D….. and amazing job you did it here =D… congrats!!

    • simonseddon

      Using top-bottom AND left-right is going to need a LOT of specialist photography. Hopefully that’s not what you mean – or good luck shooting those photos (nm loading them all). I was recently asked to create a “3D” viewer for a sculpter to show his bronzes off. Shooting each of his 14 statues 72 times (5° intervals) without the light or center point shifting meant that my first step was creating a specialist table. If I was going up/down too I’m not sure it would be possible. It’s more likely that you’d require a 3D model which can be spun around at leisure.. but you’d still require 72×72 (5,184) images to be loaded.

      • simonseddon

        P.S. why 72? It’s a lot for this sort of thing, but divides evenly by 2 (36), 3 (24) and 4 (18) so gives the option of low-bandwidth variations as well as the super smooth 72 version. My ideal upgrade to this script would be to load in the above variations progressively, filling in the gaps as each variation is fully loaded.

      • Scott Buchanan

        I think it’s a given that if you’re seriously shooting 360 photography, especially on two axes, you’re either a masochist or you’re using an automated turntable. :-D

  • Curt

    You could also use a bezier curve in the CSS transition to achieve the “bounce” effect for the control. http://www.hongkiat.com/blog/css-cubic-bezier/

  • http://www.maximizefotografia.com.br Rômulo Bastos

    Wow. Awsome plugin, Sebastiano! Thank you! :)

  • http://saijogeorge.com/best-marketing-tools/ Saijo George

    Great tutorial Sebastiano, Can you add some more info on how was the image created?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hey Saijo! I used PS to merge all images into one. There are useful PS scripts that can speed up the process:

      If you were referring to the process of taking pictures of the product, there are photography kits available for small products, while I guess it’s super tricky for bigger products like cars :) Not sure how they do that tbh

      • http://saijogeorge.com/best-marketing-tools/ Saijo George

        Thanks Sebastiano, that should help me get started.

  • Eliezer Pujols

    It’s amazing, I congratulate them!!!

  • http://www.andreaskoutsoukos.com/ Andreas Koutsoukos

    Great post, need to test this on my food blog :D

    • http://codyhouse.co/ Sebastiano Guerriero

      that sounds like a great way to use this resource!

  • Naseebullah Ahmadi

    I am such a big fan of your work Sebastiano! Every work you produce is 1000% quality. Keep up the good work!

  • TimHolmesDesign

    Love it….. i can see this coming in very handy indeed!

    • TimHolmesDesign

      Just need a version now were at each frame you can include different tool tips that point and popup to specific parts of the car – e.g. wheels – which pops up a bit of info and close up, or exhaust, engine, lights etc – seriously loving this piece of work – great job!

  • Phil

    hay! How do I insert other picture sprites? I’ve one that is more than 16 pictures and if I insert the link into it, it will not shown :s Help please! :) And nice work!!

    • Phil

      Solved it! :D
      It was easy..just change the number “16” to “26” in the index.php line 19:


  • Phil

    why does it only work in internet explorer? And not in firefox or chrome?

    • http://codyhouse.co Claudia Romano

      Hi Phil, thanks for the heads-up. There was an issue with cached images; we just uploaded a new version which should fix it. Cheers!

  • http://dheerurawat.xyz Dheeru Rawat

    Did you Mean 180 Degrees?

  • John

    Awesome plugin!! Is it possible to begin at frame 8, instead of 1? I’m trying to figure it out, but with no success yet. Please help!

  • http://star-marketing.ro WebDesign Timisoara

    This is very awesome! Nice plugin!

  • Maxim Cojocaru

    Hi! Amazing work. Could you please help me ? How can o make it adaptive on mobile ?

  • Svet Valentin

    Verry cool, thnx!

  • AP

    Can we use multiple images instead of one long image?

  • Alan Helouani

    Great and simple!! Thanks!! Somtimes, the first time dont work? any idea?

  • Skip

    I did this back in 1993 with a QuickTime movie and Macromedia Director. People were a-m-a-z-e-d by this back then.

  • Cozy Codes

    Hi great stuff..How did you get those images mentioned in the photo credits.

  • Alexandre Michel

    When trying to load the page in Edge I get this message:

    This page is having a problem loading
    We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.

  • DGSM

    This is great thanks. I have two questions.

    1. Do you think filesize is an issue with this, looking at the alfa image its 2mb.
    2. What’s controlling height of .product-viewer, overflow is hidden for obvious reasons but it cuts the height of images other than the demo.

    Thanks :)