360 degrees product view

Posted on December 14, 2010 by StableFlow Team

Introduction

j360 is a jQuery plugin designed to display 360 view of product using a set of images.
Dual licensed under the MIT and GPL licenses.

Features

- Compatibility with iPhone, iPod, iPad, Google Android devices.
- Mouse view on PC.
- Tap view on touch screen mobile devices.

Example




































How to use

Include necessary JS files:

<script src="./js/jquery-1.4.4.min.js"><!--mce:3--></script>
<script src="./js/j360.js"><!--mce:4--></script>

Put the list of images with needed order into the div. You can set width and height via css. If you want to keep layout of page correct while the page loading you should use css parameter overflow: hidden;

<div id="product" style="width: 640px; height: 300px; overflow: hidden;">
    <img src="images/01.jpg" alt="" />
    <img src="images/02.jpg" alt="" />
    <img src="images/03.jpg" alt="" />
    <img src="images/04.jpg" alt="" />
    <img src="images/05.jpg" alt="" />
    <img src="images/06.jpg" alt="" /></div>

Fire plugin using jQuery selector:

<script type="text/javascript"><!--mce:5--></script>

Download j360

Version: v.1.0.0

This entry was posted in HTML5, jQuery plugins. Bookmark the permalink.

6 Responses to 360 degrees product view

  1. Jameel says:
    March 13, 2011 at 2:30 pm

    Hello friend nice work but iam trying to use it multiple times on same page but it does not display images on other places.

    any help regarding this?

    • serjstarling says:
      March 30, 2011 at 5:02 pm

      This is a free demo concept which provides ability to place single copy per page. You are welcome to play with the code and optimize it for your needs.

  2. Jonathon says:
    April 14, 2011 at 8:12 am

    Hello I have tested it here http://www.brokenstonerecords.com/colab/shop/neasden-control-centre/ncc001_the-duke/

    All files installed, JS loaded and fired correctly
    The images load (hidden)

    But the scrolling function is not working. Any advice?

    Thanks!

  3. Jonathon says:
    April 14, 2011 at 9:32 am

    Managed to fix!
    the view_overlay css needed to be modified to remove the positioning offsets in the 360.js file:
    ie:

    FROM

    ‘top’ : $obj.offset().top,
    ‘left’ : $obj.offset().left

    TO

    $overlay.css({
    ‘margin-top’ : 0,
    ‘top’ : ’0′,
    ‘left’ : ’0′