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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Slideshow problems,please help.

    Hello,I'm having some issues with this slideshow.I want to create a slideshow with next and previous buttons only,I got the one above from a good guy on this forum and I have some problems with it:
    1.When I first open the site the slideshow changes the first 3 images very fast and then starts working normaly
    2.I tryed to remove the white space between the left end of the screen and the slideshow but I can't,I used position:absolute left: 0px; margin: 0; border: 0; and its not working.
    Please help me and thank you for your time spent reading this and maybe solving this.


    <!DOCTYPE html>
    <html>
    <style type="text/css">

    #ss
    {
    position:absolute;left:0px;top:71px; width: 1366px; height: 675px; border: 0; margin: 0;
    }

    .dyncontent
    {
    position:absolute;left:0px;top:71px; width: 1366px; height: 675px; border: 0; margin: 0;
    }
    /*]]>*/
    </style>
    <style>
    .slideb1
    {
    position:absolute;
    left:620px;
    top:1543px;
    border: 0; margin: 0;
    }
    .slideb2
    {
    position:absolute;
    left:670px;
    top:1543px;
    border: 0; margin: 0;
    }
    .slideb3
    {
    position:absolute;
    left:720px;
    top:1543px;
    border: 0; margin: 0;
    }
    </style>
    <body>
    <script type="text/javascript">
    function zxcAnimate(mde,obj,srt){
    this.to=null;
    this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
    this.mde=mde.replace(/\W/g,'');
    this.data=[srt||0];
    return this;
    }

    zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
    clearTimeout(this.to);
    this.time=ms||this.time||0;
    this.neg=srt<0||fin<0;
    this.data=[srt,srt,fin];
    this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
    this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
    this.inc=Math.PI/(2*this.mS);
    this.srttime=new Date().getTime();
    this.cng();
    }

    zxcAnimate.prototype.cng=function(){
    var oop=this,ms=new Date().getTime()-this.srttime;
    var n=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms)this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
    if (isFinite(n)){
    this.data[0]=n;
    this.apply();
    }
    if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
    else {
    this.data[0]=this.data[2];
    this.apply();
    if (this.Complete) this.Complete(this);
    }
    }

    zxcAnimate.prototype.apply=function(){
    if (this.data[0]<0&&!this.neg) this.data[0]=0;
    if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
    else zxcOpacity(this.obj,this.data[0]);
    }

    function zxcOpacity(obj,opc){
    if (opc<0||opc>100) return;
    obj.style.filter='alpha(opacity='+opc+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }


    </script>

    <script type="text/javascript">


    function Next(id,ud){
    var o=rotate[id],ud=typeof(ud)=='number'&&ud<0?-1:1;
    if (o){
    o.ud=ud;
    rotate(o,o.n+ud);
    }
    }

    function GoTo(id,n){
    var o=rotate[id];
    if (o){
    Pause(o.id);
    if (o.ary[n]&&n!=o.n){
    o.ud=n>o.n?1:-1;
    rotate(o,n);
    }
    }
    }

    function Auto(id,ms){
    var o=rotate[id];
    if (o){
    o.to=setTimeout(function(){ rotate(o,true); },ms||200);
    }
    }

    function Pause(id){
    var o=rotate[id];
    if (o){
    clearTimeout(o.to);
    }
    }

    function init(o){
    var id=o.ParentID,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
    if (p){
    o.ary=ByClass(p,o.ClassName);
    if (o.ary[1]){
    o.id=id;
    o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
    o.hold=typeof(hold)=='number'&&hold>20?hold+o.ms.ms*4;
    o.n=0;
    o.ud=1;
    o.lgth=o.ary.length-1;
    rotate[id]=o;
    rotate(o,true);
    typeof(srt)=='number'&&srt>20?Auto(id,srt):null;
    }
    }
    }

    function rotate(o,a){
    //get current message index (to show it):
    Pause(o.id);
    o.ary[o.n].obj.style.zIndex="0" //hide previous message
    o.ary[o.n].animate(100,0,o.ms);
    var n=o.n;
    n=a===true?n+o.ud:a;
    n=n<0?o.lgth:n>o.lgth?0:n
    o.ary[n].obj.style.zIndex="1" //show current message
    o.ary[n].animate(0,100,o.ms);
    o.n=n;
    a===true?Auto(o.id,o.hold):null;
    }

    function ByClass(obj,cls){
    var alltags=obj.getElementsByTagName("*")
    for (var ary=[],i=0; i<alltags.length; i++){
    if (alltags[i].className==cls){
    zxcOpacity(alltags[i],ary.length==0?100:0);
    ary.push(new zxcAnimate('opacity',alltags[i],0));
    }
    }
    return ary;
    }

    window.onload=function(){

    init({
    ParentID:'ss',
    ClassName:'dyncontent',
    Animate:1000,
    AutoHold:4000,
    AutoStart:1000
    });
    }

    </script>
    <img class="slideb1" src="C:\Senso PNG\Senso_0001s_0000s_0000s_0000_normal.png" width="50" height="50" onmouseup="Next('ss',1);" /><!--these are the next and previous buttons -->
    <img class="slideb2" src="C:\Senso PNG\Senso_0001s_0000s_0000s_0000_normal.png" width="50" height="50" onmouseup="Next('ss',-1);" />
    <div id="ss" style="position:relative;" onmouseover="Pause('ss');" onmouseout="Auto('ss');" >
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0000_image-1.png" /> <!-- images from the slideshow -->
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0001_image-2.png" />
    <img class="dyncontent" src="C:\Senso PNG\Senso_0001s_0001s_0001s_0000s_0002_image-3.png" />
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    
    #ss
    {
    position:absolute;left:0px;top:71px; width: 1366px; height: 675px; border: 0; margin: 0;
    }
    
    .dyncontent
    {
    position:absolute;left:0px;top:71px; width: 1366px; height: 675px; border: 0; margin: 0;
    }
    /*]]>*/
    </style>
    <style>
    .slideb1
    {
    position:absolute;
    left:620px;
    top:1543px;
    border: 0; margin: 0;
    }
    .slideb2
    {
    position:absolute;
    left:670px;
    top:1543px;
    border: 0; margin: 0;
    }
    .slideb3
    {
    position:absolute;
    left:720px;
    top:1543px;
    border: 0; margin: 0;
    }
    </style>
    <body>
    <script type="text/javascript">
    function zxcAnimate(mde,obj,srt){
    this.to=null;
    this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
    this.mde=mde.replace(/\W/g,'');
    this.data=[srt||0];
    return this;
    }
    
    zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
    clearTimeout(this.to);
    this.time=ms||this.time||0;
    this.neg=srt<0||fin<0;
    this.data=[srt,srt,fin];
    this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
    this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
    this.inc=Math.PI/(2*this.mS);
    this.srttime=new Date().getTime();
    this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
    var oop=this,ms=new Date().getTime()-this.srttime;
    var n=Math.floor((this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
    if (isFinite(n)){
    this.data[0]=n;
    this.apply();
    }
    if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
    else {
    this.data[0]=this.data[2];
    this.apply();
    if (this.Complete) this.Complete(this);
    }
    }
    
    zxcAnimate.prototype.apply=function(){
    if (this.data[0]<0&&!this.neg) this.data[0]=0;
    if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
    else zxcOpacity(this.obj,this.data[0]);
    }
    
    function zxcOpacity(obj,opc){
    if (opc<0||opc>100) return;
    obj.style.filter='alpha(opacity='+opc+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    <script type="text/javascript">
    
    
    function Next(id,ud){
    var o=rotate[id],ud=typeof(ud)=='number'&&ud<0?-1:1;
    if (o){
    o.ud=ud;
    rotate(o,o.n+ud);
    }
    }
    
    function GoTo(id,n){
    var o=rotate[id];
    if (o){
    Pause(o.id);
    if (o.ary[n]&&n!=o.n){
    o.ud=n>o.n?1:-1;
    rotate(o,n);
    }
    }
    }
    
    function Auto(id,ms){
    var o=rotate[id];
    if (o){
    o.to=setTimeout(function(){ rotate(o,true); },ms||200);
    }
    }
    
    function Pause(id){
    var o=rotate[id];
    if (o){
    clearTimeout(o.to);
    }
    }
    
    function init(o){
     var id=o.ParentID,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
     if (p){
      o.ary=ByClass(p,o.ClassName);
      if (o.ary[1]){
       o.id=id;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>20?hold+o.ms:o.ms*4;
       o.n=0;
       o.ud=1;
       o.lgth=o.ary.length-1;
       rotate[id]=o;
    //   rotate(o,true);  // remove this line
       typeof(srt)=='number'&&srt>20?Auto(id,srt):null;
      }
     }
    }
    
    function rotate(o,a){
    //get current message index (to show it):
    Pause(o.id);
    o.ary[o.n].obj.style.zIndex="0" //hide previous message
    o.ary[o.n].animate(100,0,o.ms);
    var n=o.n;
    n=a===true?n+o.ud:a;
    n=n<0?o.lgth:n>o.lgth?0:n
    o.ary[n].obj.style.zIndex="1" //show current message
    o.ary[n].animate(0,100,o.ms);
    o.n=n;
    a===true?Auto(o.id,o.hold):null;
    }
    
    function ByClass(obj,cls){
    var alltags=obj.getElementsByTagName("*")
    for (var ary=[],i=0; i<alltags.length; i++){
    if (alltags[i].className==cls){
    zxcOpacity(alltags[i],ary.length==0?100:0);
    ary.push(new zxcAnimate('opacity',alltags[i],0));
    }
    }
    return ary;
    }
    
    window.onload=function(){
    
    init({
    ParentID:'ss',
    ClassName:'dyncontent',
    Animate:1000,
    AutoHold:4000,
    AutoStart:1000
    });
    }
    
    </script>
    <img class="slideb1" src="http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg" width="50" height="50" onmouseup="Next('ss',1);" /><!--these are the next and previous buttons -->
    <img class="slideb2" src="http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg" width="50" height="50" onmouseup="Next('ss',-1);" />
    <div id="ss" style="position:relative;" onmouseover="Pause('ss');" onmouseout="Auto('ss');" >
    <img class="dyncontent" src="http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg" style="z-Index:101;"/> <!-- images from the slideshow -->
    <img class="dyncontent" src="http://www.vicsjavascripts.site88.net/StdImages/Egypt5.jpg" />
    <img class="dyncontent" src="http://www.vicsjavascripts.site88.net/StdImages/Egypt6.jpg" />
    </div>
    </body>
    </html>
    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/

  • Users who have thanked vwphillips for this post:

    Bitzu (01-01-2014)

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

    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>
    <style type="text/css">
    /*<![CDATA[*/
    #ss {
     position:absolute;left:0px;top:71px; width: 1366px; height: 675px; border: 0; margin: 0;
    }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <input type="button" name="" value="Next"onmouseup="zxcFadeSlideShow.Next('ss',1);" />
    <input type="button" name="" value="Back"onmouseup="zxcFadeSlideShow.Next('ss',-1);" />
    <input type="button" name="" value="GoTo 0"onmouseup="zxcFadeSlideShow.GoTo('ss',0);" />
    <input type="button" name="" value="GoTo 1"onmouseup="zxcFadeSlideShow.GoTo('ss',1);" />
    <input type="button" name="" value="GoTo 2"onmouseup="zxcFadeSlideShow.GoTo('ss',2);" />
    <input type="button" name="" value="Pause"onmouseup="zxcFadeSlideShow.Pause('ss');" />
    <input type="button" name="" value="Auto"onmouseup="zxcFadeSlideShow.Auto('ss');" />
    
    <div id="ss" onmouseover="zxcFadeSlideShow.Pause('ss');" onmouseout="zxcFadeSlideShow.Auto('ss');" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show (01-January-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org
    // please leave the credits intact
    
    
    var zxcFadeSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ParentID,ary=o.SRCArray,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,n=0,p=document.getElementById(id);
      if (p&&ary instanceof Array){
       var img,z0=0;
       o.a=document.createElement('A');
       p.appendChild(o.a);
       o.ary=[];
       for (;z0<ary.length;z0++){
        if (ary[z0]&&typeof(ary[z0][0])=='string'){
         i=o.ary.length;
         img=document.createElement('IMG');
         img.style.position='absolute';
         img.style.zIndex=i!=n?'0':'2';
         img.style.left=img.style.top='0px';
         img.style.width=img.style.height='100%';
         img.src=ary[i][0];
         this.opc(img,i!=n?0:100);
         ary[i][1]?img.title=ary[i][1]:null;
         o.a.appendChild(img);
         o.ary[i]=[img,ary[i][2],i!=n?0:100];
        }
       }
       o.ary[n][1]?o.a.href=o.ary[n][1]:null;
       o.id=id;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>20?hold+o.ms:o.ms*4;
       o.n=0;
       o.ud=1;
       o.lgth=o.ary.length-1;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,au){
      this.Pause(o.id);
      var n=o.n,a=o.ary[o.n];
      a[0].style.zIndex='0';
      o.a.removeAttribute('href');
      this.animate(o,a,a[2],0,new Date(),o.ms);
      o.auto=au===true;
      n=o.auto?n+o.ud:au;
      n=n<0?o.lgth:n>o.lgth?0:n;
      a=o.ary[n];
      a[0].style.zIndex='2'
      a[1]?o.a.href=a[1]:null;
      this.animate(o,a,a[2],100,new Date(),o.ms);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(n,0);
       this.opc(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       this.opc(a[0],a[2]);
       o.auto&&t==100?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSlideShow.init({
     ParentID:'ss',
     SRCArray:[
      // field 0 = the image SRC
      // field 1 = the image title
      // field 1 = the image SRC link HREF
      ['http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg'],
      ['http://www.vicsjavascripts.site88.net/StdImages/Egypt5.jpg'],
      ['http://www.vicsjavascripts.site88.net/StdImages/Egypt6.jpg']
     ],
     Animate:1000,
     AutoHold:4000,
     AutoStart:1000
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/


  •  

    Tags for this Thread

    Posting Permissions

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