Edit in JSFiddle

$(document).ready(function () {
    //Lets create an instance of the viewer
    var timeoutHandle;
    var presentation = new javascriptViewer($('#product_image_x'), {
        total_frames: 72,
        target_id: 'image_holder_x'
    });


    //when finished loading lets bind the click event to all images with class 3dweb (created class by viewer)

    $(presentation).on('loadImageEnd', function () {

        $('#start_presentation').empty();
        loop();
    });

    $(presentation).on('startDragging', function () {
        animation.stop();


    });
    $(presentation).on('stopDragging', function () {
        window.clearTimeout(timeoutHandle);
        animation.clearQueue();
        timeoutHandle = window.setTimeout(function () {
            loop();
        }, 4000);

    });
    //Lets start the presentation and clean the log
    $('#start_presentation').click(function () {
        presentation.start();
        $('#start_presentation').empty();
        $('#start_presentation').append("please wait..");

    });

    function loop() {
        // var from = presentation.getCurrentNumber();
        var from = 0;
        var to = 359;
        animation = $({
            countNum: from
        }).animate({
            countNum: to
        }, {
            duration: 4000,
            easing: 'easeOutCirc',
            step: function () {
                presentation.rotateToDegree(Math.floor(this.countNum));

            },
            complete: function () {

                loop();

            }
        });
    }
});
<div id="image_holder_x" class="imageholder" style="height:300px;">
    <img id="product_image_x" src="http://360-javascriptviewer.com/img/ipod/ipod.jpg" />
</div>
<a href="#" id="start_presentation">Start Loading</a>
.imageholder {
    width:350px;
    position:relative;
}