I am trying to develop interactive 3d viewer with Rotation and Zoom using Java script. I successfully developed a script to view product which rotates only in one axis(X-axis), but need script sample to view product which is taken in X,Y and Z axis. I have attached an image which shows camera placements.
Fig-1 Sample Camera placement
Fig -1 Shows camera positions where images are taken in single axis, This is achieved and below is the code.
<html>
<head>
<style type="text/css">
table img {
height: 250px;
width: 250px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
var xCurrent = 0;
var currentImgPos = 0;
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#product").attr("src", arr[0]);
$("#product").mouseleave(function () { xCurrent = 0; });
$("#product").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
if (xCurrent > relX) {
if (relX - xCurrent <= -5) {
if (currentImgPos >= 25) {
currentImgPos = 0;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos + 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
else {
if (relX - xCurrent >= 5) {
if (currentImgPos <= 0) {
currentImgPos = 25;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos - 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" id="product" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
</body>
</html>
Fig-2 New Camera placement
Fig -2 Shows camera positions where images are taken in X,Y and Z axis. Need sample code this part
I am trying to incorporate a preloader within my site and I would like the splash screen's loading bar to be in the shape of a custom logo. I have successfully created a clipping svg on text and images before, so I don't believe that this is where the problem is (see my jsfiddle).
I just need the loading bar's containing svg to clip the loading bar div in the shape of the inline svg.
I have included my code.
Thanks.
(function($) {
var items = new Array(),
errors = new Array(),
onComplete = function() {},
current = 0;
var jpreOptions = {
splashVPos: '35%',
loaderVPos: '75%',
splashID: '#jpreContent',
showSplash: true,
showPercentage: false,
autoClose: true,
onetimeLoad: false,
debugMode: false,
splashFunction: function() {}
}
//cookie
var getCookie = function() {
if( jpreOptions.onetimeLoad ) {
var cookies = document.cookie.split('; ');
for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
if ((parts.shift()) === "jpreLoader") {
return (parts.join('='));
}
}
return false;
} else {
return false;
}
}
var setCookie = function(expires) {
if( jpreOptions.onetimeLoad ) {
var exdate = new Date();
exdate.setDate( exdate.getDate() + expires );
var c_value = ((expires==null) ? "" : "expires=" + exdate.toUTCString());
document.cookie="jpreLoader=loaded; " + c_value;
}
}
//create jpreLoader UI
var createContainer = function() {
jOverlay = $('<div></div>')
.attr('id', 'jpreOverlay')
.css({
position: "fixed",
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 9999999
})
.appendTo('body');
jLoader = $('<svg></svg>')
.attr('id', 'jpreLoader')
.appendTo(jOverlay);
var posWidth = $(window).width() - $(jLoader).width();
$(jLoader).css({
position: 'absolute',
top: jpreOptions.loaderVPos,
left: Math.round((50 / $(window).width()) * posWidth) + '%'
});
jBar = $('<div></div>')
.attr('id', 'jpreBar')
.css({
width: '0%',
height: '100%'
})
.appendTo(jLoader);
}
//get all images from css and <img> tag
var getImages = function(element) {
$(element).find('*:not(script)').each(function() {
var url = "";
if ($(this).css('background-image').indexOf('none') == -1 && $(this).css('background-image').indexOf('-gradient') == -1) {
url = $(this).css('background-image');
if(url.indexOf('url') != -1) {
var temp = url.match(/url\((.*?)\)/);
url = temp[1].replace(/\"/g, '');
}
} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
url = $(this).attr('src');
}
if (url.length > 0) {
items.push(url);
}
});
}
//create preloaded image
var preloading = function() {
for (var i = 0; i < items.length; i++) {
if(loadImg(items[i]));
}
}
var loadImg = function(url) {
var imgLoad = new Image();
$(imgLoad)
.load(function() {
completeLoading();
})
.error(function() {
errors.push($(this).attr('src'));
completeLoading();
})
.attr('src', url);
}
//update progress bar once image loaded
var completeLoading = function() {
current++;
var per = Math.round((current / items.length) * 100);
$(jBar).stop().animate({
width: per + '%'
}, 500, 'linear');
if(jpreOptions.showPercentage) {
$(jPer).text(per+"%");
}
//if all images loaded
if(current >= items.length) {
current = items.length;
setCookie(); //create cookie
if(jpreOptions.showPercentage) {
$(jPer).text("100%");
}
//fire debug mode
if (jpreOptions.debugMode) {
var error = debug();
}
//max progress bar
$(jBar).stop().animate({
width: '100%'
}, 500, 'linear', function() {
//autoclose on
if( jpreOptions.autoClose )
loadComplete();
});
}
}
//triggered when all images are loaded
var loadComplete = function() {
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
onComplete(); //callback function
});
}
//debug mode
var debug = function() {
if(errors.length > 0) {
var str = 'ERROR - IMAGE FILES MISSING!!!\n\r'
str += errors.length + ' image files cound not be found. \n\r';
str += 'Please check your image paths and filenames:\n\r';
for (var i = 0; i < errors.length; i++) {
str += '- ' + errors[i] + '\n\r';
}
return true;
} else {
return false;
}
}
$.fn.jpreLoader = function(options, callback) {
if(options) {
$.extend(jpreOptions, options );
}
if(typeof callback == 'function') {
onComplete = callback;
}
//show preloader once JS loaded
$('body').css({
'display': 'block'
});
return this.each(function() {
if( !(getCookie()) ) {
createContainer();
getImages(this);
preloading();
}
else { //onetime load / cookie is set
$(jpreOptions.splashID).remove();
onComplete();
}
});
};
})(jQuery);
body{
display:none;
}
#jpreOverlay {
background-color: rgba(000, 000, 000, 0.87);
}
#jpreLoader{
width:300px;
height:300px;
}
#jpreBar {
background-size:30px 30px;
-moz-background-size:30px 30px;
-webkit-background-size:30px 30px;
-o-background-size:30px 30px;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
background-color:#E07300;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
-moz-clip-path: url(#clipping);
-o-clip-path: url(#clipping);
position: absolute;
}
#-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jPreLoader v2 - A jQuery preloader for Website</title>
<link rel="stylesheet" href="css/jpreloader.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jpreloader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson2/favicon.ico" />
<link rel="canonical" href="http://www.inwebson.com/demo/jpreloader-v2/" />
</head>
<body>
<section id="wrapper">
<div class="wrapper-inner">
<hgroup>
<h2>jPreLoader v2</h2>
<h3>A loading screen to preload images using jQuery</h3>
</hgroup>
<div class="container">
<ul id="set1" class="holder current">
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/181548_153793501342544_153515891370305_259700_7241508_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196528_158118380910056_153515891370305_283882_234528_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196556_159931940728700_153515891370305_293999_6261181_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/205687_165495210172373_153515891370305_326385_1869822_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/205600_167760236612537_153515891370305_338177_2160812_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/248150_174306909291203_153515891370305_374445_3774819_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/228343_171546129567281_153515891370305_358267_5126730_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/249232_174478049274089_153515891370305_375652_2662480_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/268903_186646411390586_153515891370305_435046_34596_n.jpg" /></li>
<div class=clearfix></div>
</ul>
<ul id="set2" class="holder">
<li><div id="li1"></div></li>
<li><div id="li2"></div></li>
<li><div id="li3"></div></li>
<li><div id="li4"></div></li>
<li><div id="li5"></div></li>
<li><div id="li6"></div></li>
<li><div id="li7"></div></li>
<li><div id="li8"></div></li>
<li><div id="li9"></div></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="description txtright">
Images by Mike Shaw, Cheshire UK based photographer.
</div>
</div>
</section>
<!-- This section is for Splash Screen -->
<section id="jSplash">
<section class="selected">
<svg width="82" height="82" id="jpreLoader" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="clipping">
<path stroke-opacity="0" fill-opacity="1" stroke-width="0" stroke="none" fill="#282525" d="M244,121.9L250.5,123.2C239.2,127.9 228.9,132.6 221.4,138.2L212.2,138.2L212.2,147.3C212.2,157.7 224.6,172.8 233.2,182.2L238.1,182.2C253.2,200.4 299.6,221.8 320.6,232.1C309.8,235.3 290.9,234.3 281.2,230.2L258.6,220.8C251,219.6 241.9,218.9 235.4,221.5C217.6,213.3 198.7,207 205.2,202.3C180.4,191.6 168.6,184.1 162.6,176.5L136.7,191.6C133.5,190 127,190.7 123.8,192.6L84.4,214.9C62.9,216.1 35.9,243.4 9.5,243.4C8.4,243.4 7.9,243.1 7.9,242.8C7.9,241.2 16.5,238.1 18.7,236.5C19.2,236.2 19.2,235.9 19.7,235.6L43.5,222.4L42.4,218.6L23.5,228.7C25.1,221.8 23.5,213.3 28.9,204.8L46.7,195.1C48.9,190.7 52.6,186.9 57.5,182.8L65,185L94.2,169C100.6,165.2 111.9,159.6 111.4,152.7C121.6,147.3 130.3,142.3 137.3,136.7C141.6,136.3 145.9,135.7 148.6,133.8C148.6,133.2 147.5,132.3 147.5,131.6C130.3,96.5 128.7,61.6 150.8,26.4C155.1,24.6 162.1,22 165.3,24.6L156.1,41.5C163.2,38.4 167.5,30.5 172.3,24.6C203.1,27.1 203.1,39.3 219.8,39.9L225.7,46.5C216.5,57.5 210.6,74.2 210.1,82.3L206.8,87L211.1,88.6C245.6,68.2 286.6,41.2 319.5,23.6L328.1,23.6L328.1,28C333.5,26.4 338.9,19.2 352.9,20.5L348.1,25.5C372.9,28.6 389.6,36.5 389.6,41.8C389.6,43.4 389.1,45 386.4,46.2L244,121.9M46.7,216.1L48.3,219.3C53.7,217.7 55.9,214.5 55.9,211.7L46.7,216.1M65,181.3L61.3,180.3C66.1,176.9 72,173.4 78,169.9L81.7,172.1L65,181.3M85,170.3L81.2,168.1C84.4,166.5 87.1,164.9 90.4,163.3L90.4,167.1L85,170.3M237.6,138.2L230,138.2L242.9,131.3L247.3,132.3L237.6,138.2M253.2,228.7L240.3,223.3C246.2,221.8 253.7,223.6 262.4,227.7L253.2,228.7z"></path>
</clipPath>
</defs>
</svg>
<h2>jPreLoader v2</h2>
<strong>A loading screen to preload images using jQuery</strong>
</section>
</section>
<!-- End of Splash Screen -->
<script>
$(document).ready( function() {
var timer; //timer for splash screen
//calling jPreLoader
$('body').jpreLoader({
splashID: "#jSplash",
loaderVPos: '30%',
autoClose: false,
splashFunction: function() {
//passing Splash Screen script to jPreLoader
$('#jSplash').children('section').not('.selected').hide();
$('#jSplash').hide().fadeIn(800);
timer = setInterval(function() {
splashRotator();
}, 4000);
},
});
//create splash screen animation
function splashRotator(){
var cur = $('#jSplash').children('.selected');
var next = $(cur).next();
if($(next).length != 0) {
$(next).addClass('selected');
} else {
$('#jSplash').children('section:first-child').addClass('selected');
next = $('#jSplash').children('section:first-child');
}
$(cur).removeClass('selected').fadeOut(800, function() {
$(next).fadeIn(800);
});
}
});
</script>
</body>
</html>
I'm trying to get this plug in to work, but something isn't right.
here's the issue: http://www.youtube.com/watch?v=dIGFsBBcdTQ&feature=youtu.be
This is the <head> of my HTML document:
<script>
var $after = $('.after'),
img_width = $('.after img').width(),
init_split = Math.round(img_width/2);
$after.width(init_split);
$('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
$('.before_after_slider').mouseleave(function(e){
$after.stop().animate({
width: init_split
},1000)
});
</script>
This is the body:
<div class="before_after_slider">
<div class="before">
<img src="center_before.jpg" width="100%" height="100%" alt="before" />
</div>
<div class="after">
<img src="center_after.jpg" width="100%" height="100%" alt="after" />
</div>
</div>
And this is the CSS
.before_after_slider {
position: relative;
& > * {
position: absolute;
}
}
.after {
overflow: hidden;
}
Call function when DOM gets ready.
Try:
$(document).ready(function () {
var $after = $('.after'),
img_width = $('.after img').width(),
init_split = Math.round(img_width / 2);
$after.width(init_split);
$('.before_after_slider').mousemove(function (e) {
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
$('.before_after_slider').mouseleave(function (e) {
$after.stop().animate({
width: init_split
}, 1000)
});
});
I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.
http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.
<style type="text/css">
#content
{
clear:both;
width:60%;
}
.player_control
{
float:left;
margin-right:5px;
height: 20px;
}
#player
{
height:22px;
}
#duration
{
width:400px;
height:15px;
border: 2px solid #50b;
}
#duration_background
{
width:400px;
height:15px;
background-color:#ddd;
}
#duration_bar
{
width:0px;
height:13px;
background-color:#bbd;
}
#loader
{
width:0px;
height:2px;
}
.style1
{
height: 35px;
}
</style>
<script type="text/javascript">
var audio_duration;
var audio_player;
function pageLoaded() {
audio_player = $("#aplayer").get(0);
//get the duration
audio_duration = audio_player.duration;
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
//set the volume
}
function update(){
//get the duration of the player
dur = audio_player.duration;
time = audio_player.currentTime;
fraction = time/dur;
percent = (fraction*100);
wrapper = document.getElementById("duration_background");
new_width = wrapper.offsetWidth*fraction;
document.getElementById("duration_bar").style.width = new_width + "px";
$('#currentTime').text(formatTimeSeconds(audio_player.currentTime));
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
}
function formatTimeSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString();
if (isNaN(minutes) || isNaN(seconds))
{
return "0:00";
}
var Strseconds = seconds.substr(seconds.length - 2);
return minutes + ":" + Strseconds;
}
function playClicked(element){
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "||";
}else{
audio_player.pause();
newdisplay = ">";
}
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
element.value = newdisplay;
}
function trackEnded(){
//reset the playControl to 'play'
document.getElementById("playControl").value=">";
}
function durationClicked(event){
//get the position of the event
clientX = event.clientX;
left = event.currentTarget.offsetLeft;
clickoffset = clientX - left;
percent = clickoffset/event.currentTarget.offsetWidth;
duration_seek = percent*audio_duration;
document.getElementById("aplayer").currentTime=duration_seek;
}
function Progress(evt){
$('#progress').val(Math.round(evt.loaded / evt.total * 100));
var width = $('#duration_background').css('width')
$('#loader').css('width', evt.loaded / evt.total * width.replace("px",""));
}
function getPosition(name) {
var obj = document.getElementById(name);
var topValue = 0, leftValue = 0;
while (obj) {
leftValue += obj.offsetLeft;
obj = obj.offsetParent;
}
finalvalue = leftValue;
return finalvalue;
}
function SetValues() {
var xPos = xMousePos;
var divPos = getPosition("duration_background");
var divWidth = xPos - divPos;
var Totalwidth = $('#duration_background').css('width').replace("px","")
audio_player.currentTime = divWidth / Totalwidth * audio_duration;
$('#duration_bar').css('width', divWidth);
}
</script>
</head>
<script type="text/javascript" src="js/MousePosition.js" ></script>
<body onLoad="pageLoaded();">
<table>
<tr>
<td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td>
<td colspan="2" class="style1" valign="bottom">
<div id='player'>
<div id="duration" class='player_control' >
<div id="duration_background" onClick="SetValues();">
<div id="loader" style="background-color: #00FF00; width: 0px;"></div>
<div id="duration_bar" class="duration_bar"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span id="currentTime">0:00</span>
</td>
<td align="right" >
<span id="totalTime">0:00</span>
</td>
</tr>
</table>
<audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>
</body>
Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.
The progress event doesn't fire in Chrome for WAV files but it does for MP3.
There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.