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'
        });
  
  //Image loading start
   $(presentation).on('loadImageStart', function() {
    $('#message').append('<span>loadImageStart event</span><br>');
       $( "#progressbar").show();
     });
    
   
   //Image loading progress
   $(presentation).on('loadImageProgress', function(e, number, perc) {
    $('#message').append(' ' + number + ' (' + perc + '%) ');
        $(function() {
    $( "#progressbar" ).progressbar({
      value: perc
    });
  });
     });
    
  //Image loading end
   $(presentation).on('loadImageEnd', function() {
    $('#message').append('<br><span>loadImageEnd event</span><br>');
        $( "#progressbar").hide();
     });   
    
//Lets start the presentation and clean the log
    $('#start_presentation').click(function(){
       presentation.start(); 
        $('#message').empty();
       
    })  
 
 });
<div id="image_holder_x" class="imageholder">
    <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="progressbar"></div>
<div id="message"></div>
.imageholder{
    width:350px;
    position:relative;    
}