360 demo

HTML

<!-- for demo only -->
<base href="http://i201.photobucket.com/albums/aa236/Mottie1/demo/360%20demo/">
<!-- follow this template -->
<center>
    <div id="product" style="width: 640px; height: 480px; overflow: hidden; border: #333 1px solid;">
        <img src="01_zps6026bc1c.jpg" />
        <img src="02_zpsa2d4d4f5.jpg" alt="test" />
        <img src="03_zps2205d88d.jpg" usemap="#img03" />
        <map name="img03" width="640" height="480">
            <area shape="circle" coords="366,154,65" href="#" title="Yellow Dot!"
            />
        </map>
        <img src="http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_001.jpg" />
        <img src="05_zps1af853bb.jpg" />
        <img src="06_zps1b7fa643.jpg" />
        <img src="07_zps2932dce8.jpg" />
        <img src="08_zps4f163adc.jpg" />
        <img src="09_zps37e50d59.jpg" />
        <img src="10_zps1014ea20.jpg" />
        <img src="11_zpsc8c384eb.jpg" />
        <img src="12_zps0b8b7b54.jpg" />
        <img src="13_zpsde64b7b5.jpg" />
        <img src="14_zps22185eaa.jpg" />
        <img src="15_zps96203c65.jpg" />
        <img src="16_zps5d55dfcf.jpg" />
        <img src="17_zps10a047fd.jpg" />
        <img src="18_zps96a4a721.jpg" />
        <img src="19_zps9d98717d.jpg" />
        <img src="20_zps9eaaf938.jpg" />
        <img src="21_zps609a0f29.jpg" />
        <img src="22_zps1663095a.jpg" />
        <img src="23_zps6f257c59.jpg" />
        <img src="24_zps94d1fa90.jpg" />
        <img src="25_zps0dca1ee4.jpg" />
        <img src="26_zps985ad881.jpg" />
        <img src="27_zps62a2884e.jpg" />
        <img src="28_zps4a71227d.jpg" />
        <img src="29_zps77046c66.jpg" />
        <img src="30_zps982d896e.jpg" />
        <img src="31_zpsf2303a27.jpg" />
        <img src="32_zpsd51d1a80.jpg" />
        <img src="33_zps8027e745.jpg" />
        <img src="34_zps934b7557.jpg" />
        <img src="35_zpsb31c3095.jpg" />
        <img...

CSS

/*

 Rotate to find the Yellow Dot, then hover over it!

*/
 .notseen {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

JavaScript

// original code from here http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
// No need to include the plugin, this is a simplified version of the plugin (much shorter)

jQuery(document).ready(function ($) {
    var $product = $('#product'),
        $imgs = $product.find('img'),
        imageTotal = $imgs.length - 1,
        clicked = false,
        widthStep = 4,
        currPos,
        currImg = 0,
        lastImg = 0;
    $imgs.bind('mousedown', function (e) {
        e.preventDefault(); // prevent dragging images
    })
        .filter(':gt(0)').addClass('notseen');

    $product.bind('mousedown touchstart', function (e) {
        if (e.type == "touchstart") {
            currPos = window.event.touches[0].pageX;
        } else {
            currPos = e.pageX;
        }
        clicked = true;
        return false;
    });
    $(document)
        .bind('mouseup touchend', function () {
        clicked = false;
    })
        .bind('mousemove touchmove', function (e) {
        if (clicked) {
            var pageX;
            if (e.type == "touchmove") {
                pageX = window.event.targetTouches[0].pageX;
            } else {
                pageX = e.pageX;
            }
            widthStep = 4;
            if (Math.abs(currPos - pageX) >= widthStep) {
                if (currPos - pageX >= widthStep) {
                    currImg++;
                    if (currImg > imageTotal) {
                        currImg = 1;
                    }
                } else {
                    currImg--;
                    if (currImg < 1) {
                        currImg = imageTotal;
                    }
                }
                currPos = pageX;
                $imgs.eq(lastImg).addClass('notseen');
                $imgs.eq(currImg).removeClass('notseen');
                lastImg = currImg;
                // $obj.html('<img src="' + aImages[options.currImg] + '" />');
            }
        }
    });
});