...

View Full Version : Re: Picture cube slideshow



Rodney Arnoldi
05-03-2006, 10:42 AM
Picture cube slideshow from Free JavaScript Kit, by Tony Foster 111.

Can someone help me please.

I am using the above cube slideshow and would like to know how to adapt it so that it will on/off when the mouse is placed over a link. In other words, when the mouse is over a link, only then will the cube will starts to function. At the moment the cube starts automatically. Also I would like to have different links to activate a different set of images.
If anyone has some ideas how to do this, I will be most obliged for the code.
Thanks Rodney.

Code (basic) from http://wsabstract.com/[/url]


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>This free script provided by JavaScript Kit</title>
</head>

<body>

<script language="JavaScript1.1">

//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
//Visit JavaScript Kit (http://javascriptkit.com) for script

var specifyimage=new Array() //Your images
specifyimage[0]="images/tea.jpg"
specifyimage[1]="images/waterfall.jpg"
specifyimage[2]="images/nuwara eliya golf club.jpg"
specifyimage[3]="images/nuwara eliya lake.jpg"


var delay=2000 //3 seconds

//Counter for array
var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
</script>

<img src="photo1.jpg" name="cube" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH'); position:absolute; left:252; top:209">

<p align="center"><font face="arial" size="-2"></font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">


</a></font>


</body>

</html>
</html>

Kor
05-03-2006, 10:52 AM
Welcome to the Forum. Unfortunatley, as we have no magic bowl, we can not imagine what have you done, in which language you have made that cube, what kind javascript help you need.

I wonder... if you know so little of HTML how's that you made a cube? And will you be able to catch our javascript advices, if necessary?

Rodney Arnoldi
05-03-2006, 02:17 PM
Dear Kor,

Thank you for your quick response to my question. Sorry I had forgotten to mention that the codes for the two programmes I was refering to were taken from the Free Java Script Kit under the heading Image slideshows & galleries, at: http://wsabstract.com/. I have now ammended my letter. No I am not clever enough to design my own html code.

Thanks Rodney.

Kor
05-03-2006, 07:57 PM
Ok, we all here will have look on and, if get a solution we will be post it

Rodney Arnoldi
05-04-2006, 05:20 PM
Ok, we all here will have look on and, if get a solution we will be post it

Thanks Kor, Looking forward to hearing from you. Rodney

vwphillips
05-04-2006, 10:11 PM
If you are still watching

have something almost done. needs finishing

be back when its finished

ps had an old script but was not happy with it so started afresh


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body onload="zxcInitCube('H','Test1',ImgAry,10,0);zxcInitCube('V','Test2',ImgAry2,10,0);">
<div id="Test1" style="position:relative;width:150px;height:100px;" onmouseover="zxcPause('Test1');" onmouseout="zxcStart('Test1');" ></div>

<input type="button" name="" value="Left" onclick="zxcFwdPrev('Test1',1,'H');" />
<input type="button" name="" value="Right" onclick="zxcFwdPrev('Test1',-1,'H');" />
<input type="button" name="" value="Auto" onclick="zxcAuto('Test1',3000);" />
<br />
<br />
<div id="Test2" style="position:relative;width:150px;height:100px;" onmouseover="zxcPause('Test2');" onmouseout="zxcStart('Test2');" ></div>
<input type="button" name="" value="Up" onclick="zxcFwdPrev('Test2',1);" />
<input type="button" name="" value="Down" onclick="zxcFwdPrev('Test2',-1);" />
<input type="button" name="" value="Auto" onclick="zxcAuto('Test2',3000);" />
<input type="button" name="" value="Toggle" onclick="zxcToggleMode('Test2');" />

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=[];
ImgAry[0]=['Img','One.gif'];
ImgAry[1]=['Img','Two.gif'];
ImgAry[2]=['Img','Three.gif'];
ImgAry[3]=['Img','Four.gif'];
ImgAry[4]=['Img','Five.gif'];

var ImgAry2=[];
ImgAry2[0]=['Text','<div style="position:abolute;overflow:hidden;left:0px;top:0px;width:150px;height:100px;" ><br><br>Six.gif<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" widt="50" height="50" /></div>'];
ImgAry2[1]=['Img','Seven.gif'];
ImgAry2[2]=['Img','Eight.gif'];
ImgAry2[3]=['Img','Nine.gif'];

for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
if (ImgAry[zxc0][0]=='Img'){ ImgAry[zxc0][1]=ImgPath+ImgAry[zxc0][1]; }
}
for (var zxc0=0;zxc0<ImgAry2.length;zxc0++){
if (ImgAry2[zxc0][0]=='Img'){ ImgAry2[zxc0][1]=ImgPath+ImgAry2[zxc0][1]; }
}

var zxcEvtCnt=0;
var zxcOOPCnt=0;

function zxcInitCube(zxcmd,zxcid,zxcary,zxcspd,zxcnu){
var zxcp=zxcid;
if (typeof(zxcp)=='string'){ zxcp=document.getElementById(zxcp); }
var zxcimg,zxcdiv,zxcc,zxc0;
if (zxcmd=='H'){
zxcimg=zxcStyle('IMG',{position:'absolute',left:'0px',top:'0px',width:'0px',height:zxcp.offsetHeight +'px'});
zxcdiv=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:'0px',height :zxcp.offsetHeight+'px'});
}
if (zxcmd=='V'){
zxcimg=zxcStyle('IMG',{position:'absolute',left:'0px',top:'0px',width:zxcp.offsetWidth+'px',height:' 0px'});
zxcdiv=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:zxcp.offsetW idth+'px',height:'0px'});
}
zxcp.appendChild(zxcimg);
zxcp.appendChild(zxcdiv);
zxcp.ary=[];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
if (zxcary[zxc0][0].toUpperCase().match('I')){ zxcc=zxcimg.cloneNode(true); zxcc.src=zxcary[zxc0][1]; }
if (zxcary[zxc0][0].toUpperCase().match('T')){ zxcc=zxcdiv.cloneNode(true); zxcc.innerHTML=zxcary[zxc0][1]; }
zxcp.appendChild(zxcc);
zxcp.ary.push(zxcc);
}
zxcp.removeChild(zxcimg);
zxcp.removeChild(zxcdiv);
zxcp.oopcube=new zxcOOPCube(zxcmd,zxcp,zxcspd,zxcnu);
}

function zxcFwdPrev(zxcid,dir,zxcxy,zxcauto){
var zxcp=zxcCkObject(zxcid);
clearTimeout(zxcp.oopcube.to);
zxcp.oopcube.hv=zxcxy||zxcp.oopcube.hv;
if (zxcp.oopcube.hv!='H'&&zxcp.oopcube.hv!='V'){ zxcp.oopcube.hv='H'; }
zxcp.oopcube.auto=zxcauto||false;
zxcp.oopcube.dir=dir;
zxcStyle(zxcp.oopcube.lst,{width:'0px'});
zxcp.oopcube.fwdprevrightleft();
}

function zxcAuto(zxcid,zxcadly){
var zxcp=zxcid;
if (typeof(zxcp)=='string'){ zxcp=document.getElementById(zxcp); }
zxcp.oopcube.adly=zxcadly||zxcp.oopcube.adly;
zxcFwdPrev(zxcid,zxcp.oopcube.dir,zxcp.oopcube.hv,!zxcp.oopcube.auto)
}

function zxcPause(zxcid){
var zxcp=zxcCkObject(zxcid);
if (!zxcp.oopcube){ return; }
clearTimeout(zxcp.oopcube.to);
}

function zxcStart(zxcid){
var zxcp=zxcCkObject(zxcid);
if (!zxcp.oopcube){ return; }
if (zxcp.oopcube.lrary){
if (zxcp.oopcube.hv=='H'){ zxcp.oopcube.horizontal(); }
if (zxcp.oopcube.hv=='V'){ zxcp.oopcube.vertical(); }
}
}

function zxcToggleMode(zxcid){
var zxcp=zxcCkObject(zxcid);
if (!zxcp.oopcube){ return; }
if (zxcp.oopcube.hv=='H'){ zxcp.oopcube.hv='V'; }
else { zxcp.oopcube.hv='H'; }
}


function zxcOOPCube(zxcmd,zxcp,zxcspd,zxcnu){
this.obj=zxcp;
zxcmd=zxcmd||'H';
if (zxcmd=='H'){ this.hv='H'; }
else { this.hv='V'; }
this.ary=zxcp.ary;
this.nu=zxcnu||0;
this.dir=1;
this.auto=false;
this.adly=1000;
this.spd=zxcspd||10;
this.w=zxcp.offsetWidth;
this.h=zxcp.offsetHeight;
this.ref='zxcoopcube'+zxcOOPCnt++;
window[this.ref]=this;
this.to=null;
this.lst=this.ary[this.nu];
this.nxt=this.lst;
if (this.hv=='H'){ zxcStyle(this.lst,{width:this.w+'px'}); }
if (this.hv=='V'){ zxcStyle(this.lst,{height:this.h+'px'}); }
}

zxcOOPCube.prototype.fwdprevrightleft=function(){
this.lst=this.nxt;
zxcStyle(this.lst,{left:'0px',top:'0px',width:this.w+'px',height:this.h+'px'});
this.nu=this.nu+this.dir;
if (this.nu<0){ this.nu=this.ary.length-1; }
if (this.nu>=this.ary.length){ this.nu=0; }
this.nxt=this.ary[this.nu];
if (this.hv=='H'){ zxcStyle(this.nxt,{left:'0px',top:'0px',width:'0px',height:this.h+'px'}); }
if (this.hv=='V'){ zxcStyle(this.nxt,{left:'0px',top:'0px',width:this.w+'px',height:'0px'}); }
if (this.dir>0){ this.lrary=[this.lst,this.nxt]; }
if (this.dir<0){ this.lrary=[this.nxt,this.lst]; }
if (this.hv=='H'){ this.horizontal(); }
if (this.hv=='V'){ this.vertical(); }
}

zxcOOPCube.prototype.horizontal=function(){
if ((this.dir>0&&parseInt(this.lrary[0].style.width)>0)||(this.dir<0&&parseInt(this.lrary[1].style.width)>0)){
zxcStyle(this.lrary[0],{width:(parseInt(this.lrary[0].style.width)-this.dir)+'px'});
zxcStyle(this.lrary[1],{width:(this.w-parseInt(this.lrary[0].style.width))+'px',left:(parseInt(this.lrary[0].style.width))+'px'});
this.setTimeOut('horizontal();',this.spd);
}
else if (this.auto){
this.setTimeOut('fwdprevrightleft();',this.adly);
}
}

zxcOOPCube.prototype.vertical=function(){
if ((this.dir>0&&parseInt(this.lrary[0].style.height)>0)||(this.dir<0&&parseInt(this.lrary[1].style.height)>0)){
zxcStyle(this.lrary[0],{height:(parseInt(this.lrary[0].style.height)-this.dir)+'px'});
zxcStyle(this.lrary[1],{height:(this.h-parseInt(this.lrary[0].style.height))+'px',top:(parseInt(this.lrary[0].style.height))+'px'});
this.setTimeOut('vertical();',this.spd);
}
else if (this.auto){
this.setTimeOut('fwdprevrightleft();',this.adly);
}
}

zxcOOPCube.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyle(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcCkObject(zxcid){
var zxcp=zxcid;
if (typeof(zxcp)=='string'){ zxcp=document.getElementById(zxcp); }
return zxcp;
}

/*]]>*/
</script>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=100 name=Show0 >
<input size=100 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 >
</form>

</body>

</html>

Rodney Arnoldi
05-05-2006, 08:55 AM
Thanks Mr Phillips,

Thanks very much for your trouble. Looking forward to hearing from you when it is ready,

Best wishes, Rodney. PS. Incidently, I am from England but living most of the time is Sri Lanka. I am doing a website for my small guest house over here.

vwphillips
05-05-2006, 03:46 PM
let me know how you get on

http://www.vicsjavascripts.org.uk/CubeSlideShow/CubeSlideShow.htm

Rodney Arnoldi
05-05-2006, 07:12 PM
Thank you Vic,

I am looking into it, please give me a while, then I will come back to you.

Thanks Rodney

Rodney Arnoldi
05-07-2006, 05:26 PM
let me know how you get on

http://www.vicsjavascripts.org.uk/CubeSlideShow/CubeSlideShow.htm


Dear Vic, Thank you for the trouble you have gone to designing the cube show for me, but unfortunately it is more complex than I require. All I need for my requirements is a cube slide show that is not visible until the mouse rolls over an image or text link and disappears when the mouse is removed. Therefore, when the mouse rolls over an image/text on the screen, only then will the cube appear and start to rotate. Also, I would like the cube to display a different set of picture when the mouse is rolled over different images (links) on the screen. The idea came from the "OnMouse Slideshow from the JavaScript Kit. but that only displays one picture per link, but I would like a cube slide show to start instead. Hopefully it is possible. Can you do it for me please?
Regards, Rodney PS. I hope that I have explained myself better this time!

vwphillips
05-07-2006, 09:20 PM
set of picture when the mouse is rolled over different images (links) on the screen.

the code allows this, see the application notes



how that is not visible until the mouse rolls over an image or text link and disappears when the mouse is removed

set the style of the slide show to hidden

on mouse over set this to visible;
on mouse out set this to hidden;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum