$(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; }