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