<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: 'watch',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './watch/images/'
}
});
});
</script>Generate Animation Dynamically
In this section, we use server-side programming language (ex. php) to generate animation page dynamically. First, we need to change the file structure, and place animations together. Second, we add a .html page to list a product, after click the link of product, we pass the corresponding parameter to .php file. Finally, we add snippet to receive the parameter to decide which product we display.
// File Structure
- icons/
- *.png
- *.svg
- libs/
- *.js
- *.css
- DBGlassses/
- images/
- *.jpg
- OakleyGlasses/
- images/
- *.jpg
- RedWatch/
- images/
- *.jpg
- HomePage.html
- PHPViewer.php
<!-- HomePage.html -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<li><a href="#" onclick="openAnimation(this)">DBGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">OakleyGlasses</a></li>
<li><a href="#" onclick="openAnimation(this)">RedWatch</a></li>
<script type="text/javascript">
function openAnimation (pressedBtn) {
var btnValue = pressedBtn.innerText;
window.location = './PHPViewer.php?name=' + btnValue;
};
</script>
</body>
</html> <!-- PHPViewer.php -->
<?php
$objName = $_GET["name"];
?>
<!-- include program files -->
<link rel="stylesheet" href="libs/creator.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.plugin.js"></script>
<script type="text/javascript" src="libs/creator.js"></script>
<!-- define an animation container -->
<div id="sample360" class="animate-creator-container" style="width:600px; height:600px;"></div>
<script>
jQuery(function ($) {
// use id of the elem to call animate360 method
$('#sample360').animate360({
object: {
name: '<?php echo $objName; ?>',
model: 'cylindrical',
columns: 24,
width: 500,
height: 276
},
path: {
image: './<?php echo $objName; ?>/images/'
}
});
});
</script>
Embedded Animation with Thumbnails
This embedded animation uses the same viewing window for both thumbnails of their image and 360 animations. You simply mouse over the image/animation thumbnail you would like to view and it fills the larger screen. The no click approach makes transitioning between the images and animation smooth.
<style>
.embeded-animation-view {
position: relative;
}
.embeded-animation-view ul {
text-align: center;
}
.embeded-animation-view ul li {
position: absolute;
box-sizing: border-box;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
}
.embeded-animation-view ul li:first-child {
display: block;
}
.embeded-animation-view ul li div {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="embeded-animation-view">
<ul>
<li>
<div style="background-image:url(images/mario/Lv2/img02.jpg);"></div>
</li>
<li>
<div style="background-image:url(images/mario/Lv2/img11.jpg);"></div>
</li>
<li>
<iframe src="https://truview.ortery.com/guide.page/samples/mario.html" frameborder="0" width="100%" height="100%"></iframe>
</li>
</ul>
</div>
<div class="embeded-animation-slider">
<div style="background-image:url(images/thumbnail/mario-front.jpg);"></div>
<div style="background-image:url(images/thumbnail/mario-back.jpg);"></div>
<div style="background-image:url(images/360.jpg);"></div>
</div>
<script>
$('.embeded-animation-slider').on('mouseover', '.doc-thumbnail', function () {
var index, items;
// get current index of thumbnail
index = $('.embeded-animation-slider .doc-thumbnail').index(this);
items = $('.embeded-animation-view li');
// hide all <li> elements and show the matched index
items.css('display', 'none').eq(index).css('display', 'block');
});
</script>