...

View Full Version : Script similar to Picture Cube?



eggmedia
06-16-2010, 05:45 PM
I have searched for a rotating image script to use at mrsgriffins.com (http://mrsgriffins.com) and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal?

Thanks for any help!

hdewantara
06-18-2010, 06:56 AM
Hi,
Is yours the one at http://www.javascriptkit.com/script/script2/cubeslideshow.shtml ? Cool...

Try mine below,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>

<style type="text/css">
#cube{
width: 100px;
height: 100px;
}
#img_left{
border: 0px;
height: 100px;
width: 100px;
}
#img_right{
border: 0px;
height: 100px;
width: 0px;
}
</style>

<script type="text/javascript">
//<![CDATA[

var
timer_anim = setInterval("anim()",50);
timer_still = null;

img_name = [ "myaunt.gif", "me.gif", "brother.gif" ];

idx_left = 0; //indexes to img_name
idx_right = idx_left + 1;

width_cube = 100;
width_left = width_cube;

function anim(){
var
el_left = document.getElementById("img_left");
el_right = document.getElementById("img_right");

if (width_left > 0){ //sliding animation for both images
width_left -= 5;
el_left.style.width = width_left + "px";
el_right.style.width = (width_cube-width_left) + "px";
}
else{ //end sliding, change image sources.
clearInterval(timer_anim);
timer_change = setTimeout("still()",3000);
}
}

function still(){
var
el_left = document.getElementById("img_left");
el_right = document.getElementById("img_right");

idx_left = (idx_left < img_name.length-1)? idx_left+1 : 0;
idx_right = (idx_right < img_name.length-1)? idx_right+1 : 0;

width_left = width_cube;

el_left.src=img_name[idx_left];
el_right.src=img_name[idx_right];

el_left.style.width = width_left + "px";
el_right.style.width = (width_cube-width_left) + "px";

timer_anim = setInterval("anim()",50);
}

//]]>
</script>

</head>

<body>
<div id="cube">
<img src="myaunt.gif" id="img_left" /><img src="me.gif" id="img_right" />
</div>
</body>
</html>


I missed 3D feeling though,
may be somebody could enhance it :confused:

jmrker
06-18-2010, 06:03 PM
Nice idea. :thumbsup:

Here's a modification with an attempt at the 3D feeling. :)
Only problem I have is that it produces an anonying image blink at the end of the "still()" function.
I'm not exactly sure why at this time. :(

I left justified lines that I changed in your code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
#cube{ width: 200px; height: 200px; }
#img_left{ border: 0px; height: 200px; width: 200px; position:absolute; top:0px; left:0px; }
#img_right{ border: 0px; height: 200px; width: 200px; position:absolute: top:0px; left:0px; }
</style>

<script type="text/javascript">
// From: http://codingforums.com/showthread.php?t=198262
// almost correct -- Problem: images 'blinks' at end of cycle

//<![CDATA[

var timer_anim = setInterval("anim()",50);
var timer_change = null;

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var img_name = [ "11.jpg", "12.jpg", "13.jpg","14.jpg","15.jpg",
"21.jpg", "22.jpg", "33.jpg","44.jpg","65.jpg",
"31.jpg", "32.jpg", "33.jpg","44.jpg","65.jpg",
"41.jpg", "42.jpg", "33.jpg","44.jpg","65.jpg",
"51.jpg", "52.jpg", "33.jpg","44.jpg","65.jpg",
"61.jpg", "62.jpg", "33.jpg","44.jpg","65.jpg"]; // No comma after last entry

var idx_left = 0; //indexes to img_name
var idx_right = idx_left + 1;

var width_cube = 200;
var width_left = width_cube;

function anim(){
var el_left = document.getElementById("img_left");
var el_right = document.getElementById("img_right");

if (width_left > 0){ //sliding animation for both images
width_left -= 5;
el_left.style.width = width_left + "px";
el_right.style.width = (width_cube-width_left) + "px";
el_left.style.left = (width_cube-width_left) + 'px'; // rotate images with this line, slide in-out if commented out
}
else{ //end sliding, change image sources.
clearInterval(timer_anim);
timer_change = setTimeout("still()",50); // shorten time for continuous animation (3000 to 50)
// still(); // bypass timer_change activity in line above
}
}

function still(){
var el_left = document.getElementById("img_left");
var el_right = document.getElementById("img_right");

idx_left = (idx_left < img_name.length-1)? idx_left+1 : 0;
idx_right = (idx_right < img_name.length-1)? idx_right+1 : 0;

width_left = width_cube;

el_left.src=baseURL+img_name[idx_left];
el_right.src=baseURL+img_name[idx_right];

el_left.style.width = width_left + "px";
el_right.style.width = (width_cube-width_left) + "px";

timer_anim = setInterval("anim()",50);
}

//]]>
</script>
</head>
<body>
<div id="cube">
<img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" id="img_left" />
<img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" id="img_right" />
</div>
<button onclick="still()">Start</button>
<button onclick="clearInterval(timer_anim)">Stop</button>
</body>
</html>

hdewantara
06-18-2010, 08:48 PM
Eh, how did you get that so many faces.:D

Let's go further a bit more, by adding some shadows.
Overlay divs? Nah, that would put some workload I guess.
Probably playing with opacity is better, though IE won't like it.

And accidentally I've replaced your absolute attribute with float,
just to hold the images within cube div. Strangely I could still manipulate
el_left.style.left, hmm...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
#cube{ width: 200px; height: 200px; background-color: black; margin: 0px auto;}
#img_left{ border: 0px; height: 200px; width: 200px; float: left; opacity: 1.0; }
#img_right{ border: 0px; height: 200px; width: 200px; opacity: 0.5; }
</style>

<script type="text/javascript">
// From: http://codingforums.com/showthread.php?t=198262
// almost correct -- Problem: images 'blinks' at end of cycle

//<![CDATA[

var timer_anim = setInterval("anim()",50);
var timer_change = null;

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var img_name = [ "11.jpg", "12.jpg", "13.jpg","14.jpg","15.jpg",
"21.jpg", "22.jpg", "33.jpg","44.jpg","65.jpg",
"31.jpg", "32.jpg", "33.jpg","44.jpg","65.jpg",
"41.jpg", "42.jpg", "33.jpg","44.jpg","65.jpg",
"51.jpg", "52.jpg", "33.jpg","44.jpg","65.jpg",
"61.jpg", "62.jpg", "33.jpg","44.jpg","65.jpg"]; // No comma after last entry

var idx_left = 0; //indexes to img_name
var idx_right = idx_left + 1;

var width_cube = 200;
var width_left = width_cube;

function anim(){
var el_left = document.getElementById("img_left");
var el_right = document.getElementById("img_right");

if (width_left > 0){ //sliding animation for both images
width_left -= 5;
with (el_left.style){
width = width_left + "px";
left = (width_cube-width_left) + 'px'; // rotate images with this line, slide in-out if commented out
opacity = 0.5*(1+width_left/width_cube);
}
with (el_right.style){
width = (width_cube-width_left) + "px";
opacity = 0.5*(2 - width_left/width_cube);
}
}
else{ //end sliding, change image sources.
clearInterval(timer_anim);
timer_change = setTimeout("still()",50); // shorten time for continuous animation (3000 to 50)
}
}

function still(){
var el_left = document.getElementById("img_left");
var el_right = document.getElementById("img_right");

idx_left = (idx_left < img_name.length-1)? idx_left+1 : 0;
idx_right = (idx_right < img_name.length-1)? idx_right+1 : 0;

width_left = width_cube;

el_left.src=baseURL+img_name[idx_left];
el_right.src=baseURL+img_name[idx_right];

with (el_left.style){
width = width_left + "px";
left = '0px'; // @jmrker: aha, this is wny we get the blink.. forget to reset.
opacity = 1.0;
}
with (el_right.style){
width = (width_cube-width_left) + "px";
opacity = 0.5;
}
timer_anim = setInterval("anim()",50);
}

//]]>
</script>
</head>
<body>
<div id="cube">
<img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" id="img_left" />
<img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" id="img_right" />
</div>
<button onclick="still()">Start</button>
<button onclick="clearInterval(timer_anim)">Stop</button>
</body>
</html>

jmrker
06-19-2010, 01:37 AM
@hdewantara: :thumbsup:

Nice touch with the shadow opacity. I would not have thought of that.

Thanks for pointing out where the "image blink" was coming from.
It was starting to bug me. :D

eggmedia
06-22-2010, 08:22 PM
Thanks for all of your help, I think I'm on the right track!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum