Dear All,
I'm relatively new to Javascript and am trying to initial a div pop up using an if statement and am really struggling.
I would very much appreciate it is someone would help me out with this.
It terms of the script that i have an what it does here is the description:
The javascript runs through several images creating an old school flip book affect - currently i'm using it to display a shoe rotating 360 degrees.
what the script does is to load/display images one after the other really quickly to give the impression that it is an animation but it is simply many pictures at different angles.
what i would like to add is a little bit of code that shows a div when the image number is between certain values e.g. if frame count (image number) is between 10 to 15 show div else hide div
as i'm fairly new to JS i cant seem to work this out.
Here is the Html and javascript that i am using - the images are named test0000.png, test0001.png, test0003.png and so on.
If anyone could help that would be wonderful
many thanks
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns=" xml:lang="en">
<head>
<title>360 animation</title>
<!--Meta-->
<!-- CSS -->
<style type="text/css">
.wrap {
position:relative;
width:500px;
height:500px;
margin:0 auto;
border:1px solid #F00;
}
.floatingdiv {
width:100px;
height:100px;
background:#0CF;
display:block;
position:absolute;
right:0;
bottom:0;
z-index:10;
}
</style>
<!-- Javascript -->
<script type="text/javascript" src="<script type="text/javascript" src="jquery.canimate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.canimation').canimate({
totalFrames: 16,
imagePrefix: 'test',
fps: 24,
preload:false
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="canimation">
<img src="images/second_folder/test0000.png"/>
</div>
<div class="floatingdiv">link 1</div>
</div> <!-- end wrapper -->
</body>
<./html
JAVASCRIPT:
(function($){
$.fn.canimate = function(options) {
var defaults = {
totalFrames: 16,
fps: 24,
preload: false,
loop: true
};
var nameOptions = {
numbersFirst: false,
imagePrefix: 'frame',
filetype: 'png',
};
var options = $.extend(defaults, nameOptions, options);
return this.each(function() {
if (typeof( window[ 'updater' ] ) != "undefined") {
clearInterval(updater);
}
isPlaying = true;
$totalFrames = options.totalFrames;
$filetype = '.' + options.filetype;
$image = $( this ).find( 'img' );
$interval = 1000 / options.fps;
$currentFrame = $( this ).find( 'img' ).attr( 'src' ); //Find current image
$buildFrame = $currentFrame.replace( options.imagePrefix, '' ); //Get rid of prefix
$buildFrame = $buildFrame.replace( '.' + options.filetype, ''); //Get rid of filetype
$buildFrame = $buildFrame.split('/'); //Get rid of directories
$numberIndex = $buildFrame.length; //Find location of counter
$builtFrame = parseInt($buildFrame[ $numberIndex - 1 ]); //current number
$nextFrameLocation= "";
for ( $directory=0; $directory < $buildFrame.length - 1; $directory++ ) {
$nextFrameLocation = $nextFrameLocation + $buildFrame[ $directory ] + '/';
}
if (options.preload == false) {
updater ($builtFrame, $nextFrameLocation, $filetype, options, $interval);
} else {
preload($builtFrame, $nextFrameLocation, $filetype, options, $interval);
}
});
function zeroPad(num,count)
{
var numZeropad = num + '';
while(numZeropad.length < count) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function preload($builtFrame, $nextFrameLocation, $filetype, options, $interval)
{
$('body').prepend('<div class="canimate_preloader"></div>');
for ($zeroFrame = $builtFrame; $zeroFrame <= options.totalFrames; $zeroFrame++) {
$nextFrameNumber = zeroPad( $zeroFrame, 4 );
$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
$('.canimate_preloader').append('<img class="' + $zeroFrame + '" src="' + $nextFrame + '"/>');
$('.canimate_preloader img').css({height:0, width:1});
}
$('.canimation').prepend('<div style="text-align:center;" class="canimate_loadMessage">Loading...</div>');
$image.css({opacity:0});
var totalLoaded = 0;
$('.canimate_preloader img').load(function(){
totalLoaded++;
$('.canimate_loadMessage').text('Loaded ' + totalLoaded + ' of ' + options.totalFrames + ' images.');
if ( totalLoaded >= options.totalFrames ){
$('.canimate_loadMessage').hide();
if ( typeof( window[ 'updater' ] ) == "undefined" ) {
updater ($builtFrame, $nextFrameLocation, $filetype, options, $interval);
}
$image.animate({opacity:1}, 200);
}
});
}
function updater($builtFrame, $nextFrameLocation, $filetype, options, $interval)
{
updater =
setInterval(
function(){
imageUpdate($builtFrame, $nextFrameLocation, $filetype, options);
if ( $builtFrame < options.totalFrames ) {
$builtFrame++;
} else {
if (options.loop == true) {
$builtFrame = 0;
} else {
clearInterval(updater);
}
}
}, $interval
);
}
function imageUpdate($builtFrame, $nextFrameLocation, $filetype, options)
{
$nextFrameNumber = zeroPad( $builtFrame, 4 );
$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
$image.attr( 'src', $nextFrame );
}
};
})(jQuery);
I'm relatively new to Javascript and am trying to initial a div pop up using an if statement and am really struggling.
I would very much appreciate it is someone would help me out with this.
It terms of the script that i have an what it does here is the description:
The javascript runs through several images creating an old school flip book affect - currently i'm using it to display a shoe rotating 360 degrees.
what the script does is to load/display images one after the other really quickly to give the impression that it is an animation but it is simply many pictures at different angles.
what i would like to add is a little bit of code that shows a div when the image number is between certain values e.g. if frame count (image number) is between 10 to 15 show div else hide div
as i'm fairly new to JS i cant seem to work this out.
Here is the Html and javascript that i am using - the images are named test0000.png, test0001.png, test0003.png and so on.
If anyone could help that would be wonderful
many thanks
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns=" xml:lang="en">
<head>
<title>360 animation</title>
<!--Meta-->
<!-- CSS -->
<style type="text/css">
.wrap {
position:relative;
width:500px;
height:500px;
margin:0 auto;
border:1px solid #F00;
}
.floatingdiv {
width:100px;
height:100px;
background:#0CF;
display:block;
position:absolute;
right:0;
bottom:0;
z-index:10;
}
</style>
<!-- Javascript -->
<script type="text/javascript" src="<script type="text/javascript" src="jquery.canimate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.canimation').canimate({
totalFrames: 16,
imagePrefix: 'test',
fps: 24,
preload:false
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="canimation">
<img src="images/second_folder/test0000.png"/>
</div>
<div class="floatingdiv">link 1</div>
</div> <!-- end wrapper -->
</body>
<./html
JAVASCRIPT:
(function($){
$.fn.canimate = function(options) {
var defaults = {
totalFrames: 16,
fps: 24,
preload: false,
loop: true
};
var nameOptions = {
numbersFirst: false,
imagePrefix: 'frame',
filetype: 'png',
};
var options = $.extend(defaults, nameOptions, options);
return this.each(function() {
if (typeof( window[ 'updater' ] ) != "undefined") {
clearInterval(updater);
}
isPlaying = true;
$totalFrames = options.totalFrames;
$filetype = '.' + options.filetype;
$image = $( this ).find( 'img' );
$interval = 1000 / options.fps;
$currentFrame = $( this ).find( 'img' ).attr( 'src' ); //Find current image
$buildFrame = $currentFrame.replace( options.imagePrefix, '' ); //Get rid of prefix
$buildFrame = $buildFrame.replace( '.' + options.filetype, ''); //Get rid of filetype
$buildFrame = $buildFrame.split('/'); //Get rid of directories
$numberIndex = $buildFrame.length; //Find location of counter
$builtFrame = parseInt($buildFrame[ $numberIndex - 1 ]); //current number
$nextFrameLocation= "";
for ( $directory=0; $directory < $buildFrame.length - 1; $directory++ ) {
$nextFrameLocation = $nextFrameLocation + $buildFrame[ $directory ] + '/';
}
if (options.preload == false) {
updater ($builtFrame, $nextFrameLocation, $filetype, options, $interval);
} else {
preload($builtFrame, $nextFrameLocation, $filetype, options, $interval);
}
});
function zeroPad(num,count)
{
var numZeropad = num + '';
while(numZeropad.length < count) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function preload($builtFrame, $nextFrameLocation, $filetype, options, $interval)
{
$('body').prepend('<div class="canimate_preloader"></div>');
for ($zeroFrame = $builtFrame; $zeroFrame <= options.totalFrames; $zeroFrame++) {
$nextFrameNumber = zeroPad( $zeroFrame, 4 );
$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
$('.canimate_preloader').append('<img class="' + $zeroFrame + '" src="' + $nextFrame + '"/>');
$('.canimate_preloader img').css({height:0, width:1});
}
$('.canimation').prepend('<div style="text-align:center;" class="canimate_loadMessage">Loading...</div>');
$image.css({opacity:0});
var totalLoaded = 0;
$('.canimate_preloader img').load(function(){
totalLoaded++;
$('.canimate_loadMessage').text('Loaded ' + totalLoaded + ' of ' + options.totalFrames + ' images.');
if ( totalLoaded >= options.totalFrames ){
$('.canimate_loadMessage').hide();
if ( typeof( window[ 'updater' ] ) == "undefined" ) {
updater ($builtFrame, $nextFrameLocation, $filetype, options, $interval);
}
$image.animate({opacity:1}, 200);
}
});
}
function updater($builtFrame, $nextFrameLocation, $filetype, options, $interval)
{
updater =
setInterval(
function(){
imageUpdate($builtFrame, $nextFrameLocation, $filetype, options);
if ( $builtFrame < options.totalFrames ) {
$builtFrame++;
} else {
if (options.loop == true) {
$builtFrame = 0;
} else {
clearInterval(updater);
}
}
}, $interval
);
}
function imageUpdate($builtFrame, $nextFrameLocation, $filetype, options)
{
$nextFrameNumber = zeroPad( $builtFrame, 4 );
$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
$image.attr( 'src', $nextFrame );
}
};
})(jQuery);
