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
- Programs/
- HTML5/
- *.js
- *.css
- BuzzLightyear/
- Images/
- Lv1/
- *.jpg
- Lv2/
- *.jpg
- *.jpg
- Profiles/
- Icons/
- *.gif
- *.png
- *.xml
- Glove/
- Images/
- Lv1/
- *.jpg
- Lv2/
- *.jpg
- *.jpg
- Profiles/
- Icons/
- *.gif
- *.png
- *.xml
- HomePage.html
- PHPViewer.php
<!-- HomePage.html -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<li><a href="#" onclick="openAnimation(this)">BuzzLightyear</a></li>
<li><a href="#" onclick="openAnimation(this)">Glove</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"];
?>
<!-- define an animation container -->
<div id="sample3d" style="position:relative; width: 600px; height: 600px; top: 0px; left: 0px;"></div>
<!-- include program files -->
<script type="text/javascript" src="./Programs/HTML5/jQuery.js"></script>
<script type="text/javascript" src="./Programs/HTML5/HTML5Loader.js" id="animateScript"></script>
<script type="text/javascript">
jQuery(function ($) {
// use id of the elem to call animate3D method
$('#sample3d').animate3D({
autoAllocation: true,
pathImages: './<?php echo $objName; ?>/Images/',
pathIcons: './<?php echo $objName; ?>/Profiles/Icons/',
pathProfiles: './<?php echo $objName; ?>/Profiles/Profile.xml'
});
});
</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>