Edit in JSFiddle

$(document).ready(function() {
    //Lets create an instance of the viewer
    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();
        $('#start_presentation').append("Rotate or click for zoom");




        //grab all images
        $('#image_holder_x .3dweb').each(function() {
            var src = $(this).prop('src');
            var bigSrc = src.replace('ipod/', 'ipod/big/');
            $(this).addClass('cloudzoom');
            $(this).attr('data-cloudzoom', "zoomImage: '" + bigSrc + "'");
        });

        $('.3dweb').bind('click', function() {

            var options = {
                'zoomWidth': 288,
                'zoomHeight': 249
            };

            myInstance = new CloudZoom($(this), options); // 'normal' way.

            $('#zoom_info').show();

            //
            $('#zoomoff').click(function(e) {
                $('#zoom_info').hide();
                e.preventDefault();
                myInstance.destroy();
            });

        });



    });
            //Lets start the presentation and clean the log
        $('#start_presentation').click(function() {
            presentation.start();
            $('#start_presentation').empty();
            $('#start_presentation').append("please wait..");
        });
});
<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>
      <div id="zoom_info">
                            <a href="#" id="zoomoff"><h5>Stop zoom</h5></a>
                        </div>
.imageholder{
    width:350px;
    position:relative;    
}