Edit in JSFiddle

     $(document).ready(function () {

    /* Traditional
  Lets create an instance of the viewer with the autoload function
  Parameters are given when creating the instance
*/
    var presentation_x = new javascriptViewer($('#product_image_x'), {
        total_frames: 72,
        target_id: 'image_holder_x'
    });

    // start the presentation
    $('#start_presentation_x').click(function () {
        presentation_x.start();
        $('#start_presentation_x').empty();
    })

    /* Inline elements
  Lets create an instance of the viewer with the autoload function
  Parameters are data elements on the target
*/
    var presentation_y = new javascriptViewer($('#product_image_y'));

    // start the presentation
    $('#start_presentation_y').click(function () {
        presentation_y.start();
        $('#start_presentation_y').empty();
    })

    /* custom image source
  You can use this in combination with inline elements or parameters when creating the instance
*/
    var presentation_z = new javascriptViewer($('#product_image_z'),{
        images_src:['http://360-javascriptviewer.appspot.com/images/ipod/ipod_01.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_02.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_03.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_04.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_05.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_06.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_07.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_08.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_09.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_10.jpg',
                        'http://360-javascriptviewer.appspot.com/images/ipod/ipod_11.jpg']
    });
//and so on,
    // start the presentation
    $('#start_presentation_z').click(function () {
        presentation_z.start();
        $('#start_presentation_z').empty();
    })



});
<a href="#" id="start_presentation_x">Load with parameters</a>
<br>
<a href="#" id="start_presentation_y">Load with data elements (look how it's moving slower with ease)</a>
<br>
<a href="#" id="start_presentation_z">Custom imagesource array (not all images in example)</a>
<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>
<div id="image_holder_y" class="imageholder" style="height: 300px;">
    <img id="product_image_y" data-total_frames="72" data-target_id="image_holder_y" data-ease="2" src="http://360-javascriptviewer.com/img/ipod/ipod.jpg">
</div>
    <div id="image_holder_z" class="imageholder" style="height: 300px;">
    <img id="product_image_z" class="imageholder" data-target_id="image_holder_z" src="http://360-javascriptviewer.com/img/ipod/ipod.jpg">
</div>

.imageholder{
    width:350px;
    position:relative;    
}