Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Picture cube slideshow

    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="filterrogidXImageTransform.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>
    Last edited by Rodney Arnoldi; 05-03-2006 at 06:51 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Ok, we all here will have look on and, if get a solution we will be post it
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    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

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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

    Code:
    <!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.offsetWidth+'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>
    Last edited by vwphillips; 05-04-2006 at 10:13 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Vic,

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

    Thanks Rodney

  • #10
    New Coder
    Join Date
    May 2006
    Location
    Sri Lanka
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips

    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!

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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;
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •