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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner, help with simple slideshow Jscript please

    Hi... first time Javascript and fairly new to both HTML and CSS. Think I'm stuck on something basic here but can't find my answer through Google.

    I found a simple fade in/out image slideshow using JS/CSS/HTML on another website but when I attempt to move the code to my own files and preview it the slideshow action doesn't work.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <link href="test.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <div class="fadein">
        <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
        <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
        <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
        <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
        <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
    </div>
    
    <script>
    
    $('.fadein img:gt(0)').hide();
    
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
                                 .next('img')
                                 .fadeIn()
                                 .end()
                                 .appendTo('.fadein');
    }, 4000); // 4 seconds
    
    </script>
    
    </body>
    </html>
    Code:
    .fadein {
        position:relative;
        height:320px;
        width:320px;
    }
    
    .fadein img {
        position:absolute;
        left:0;
        top:0;
    }
    Am I missing a basic tag to tell HTML I want to use JS? Is it something to do with dom-ready? Like I said I'm totally new to this. It also wouldn't work through an external js file.

    Here is the other person's example I'm attempting to use: http://jsfiddle.net/htmled/2kkHH/

    Thanks

  • #2
    New Coder
    Join Date
    Nov 2013
    Location
    UK
    Posts
    42
    Thanks
    6
    Thanked 1 Time in 1 Post
    Hi
    Be sure to have the "test.CSS" file in your directory, and, I'm not so sure, but to use ha commands you will have to load the library.
    Code:
    <script><src="jscript.js></script>...or so....tell you later exactly.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    You left the main JQUERT script out(see red line)

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <link href="test.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
    .fadein {
        position:relative;
        height:320px;
        width:320px;
    }
    
    .fadein img {
        position:absolute;
        left:0;
        top:0;
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    
    <body>
    
    <div class="fadein">
        <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
        <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
        <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
        <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
        <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
    </div>
    
    <script>
    
    $('.fadein img:gt(0)').hide();
    
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
                                 .next('img')
                                 .fadeIn()
                                 .end()
                                 .appendTo('.fadein');
    }, 4000); // 4 seconds
    
    </script>
    
    </body>
    </html>
    or you may wish to try whick has more control

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <link href="test.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
    
    .fadein {
     position:relative;width:320px;height:320px;border:solid red 1px;
    }
    
    .fadein IMG {
     position:absolute;left:0px;top:0px;width:320px;height:320px;
    }
    
    
    .buttons {
      position:relative;left:5px;top:135px;width:230px;height:30px;border:solid red 1px;
    }
    
    .buttons IMG {
      width:14px;height:14px;float:left;margin-Left:7px;margin-Top:5px;cursor:pointer;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    
    <div id="main" class="fadein">
        <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
        <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
        <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
        <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
        <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
    </div>
    
     <div class="buttons" >
      <img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back"  onmouseup="zxcSlideShow.Next('main',-1);"/>
      <img src="http://www.vicsjavascripts.org/StdImages/pause1.gif" alt="pause" onmouseup="zxcSlideShow.Pause('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/autoright.gif" alt="auto " onmouseup="zxcSlideShow.Auto('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="GoTo 0" onmouseup="zxcSlideShow.GoTo('main',0);" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="GoTo 1" onmouseup="zxcSlideShow.GoTo('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="GoTo 2" onmouseup="zxcSlideShow.GoTo('main',2);" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="GoTo 3" onmouseup="zxcSlideShow.GoTo('main',3);" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="GoTo 4" onmouseup="zxcSlideShow.GoTo('main',4);" />
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    //Fade Slide Show (07-December-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org/index.htm
    
    var zxcSlideShow={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o);
       if (o.a[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     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);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.MainID,op=o.ThumbsOpacity,ms=o.Animate,h=o.AutoHold,s=o.AutoStart;t=document.getElementById(o.ThumbsID),p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],t=t?t.getElementsByTagName('IMG'):[];
      if (i[0]){
       var c,z0=0;
       o.op=typeof(op)=='number'&&op>0&&op<=100?op:50;
       o.a=[];
       for (;z0<i.length;z0++){
        i[z0].style.zIndex=z0!=0?'0':'2';
        this.opc(i[z0],z0!=0?0:100);
        o.a.push([i[z0],t[z0],z0!=0?0:100]);
        if (t[z0]){
         t[z0].className=z0!=0?'':' current';
         this.addevt(t[z0],'mouseup','GoTo',id,z0);
         this.opc(t[z0],z0!=0?o.op:100);
        }
       }
       o.id=id;
       o.lgth=o.a.length-1;
       o.ud=1;
       o.n=0;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var n=o.n;
      o.a[n][0].style.zIndex='0';
      o.a[n][1]?this.opc(o.a[n][1],o.op):null;
      this.animate(o,o.a[n],o.a[n][2],0,new Date(),o.ms*o.a[n][2]/100);
      o.auto=a===true;
      n=o.auto?n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[n][0].style.zIndex='2';
      o.a[n][1]?this.opc(o.a[n][1],100):null;
      this.animate(o,o.a[n],o.a[n][2],100,new Date(),o.ms*(100-o.a[n][2])/100);
      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(0,n);
       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.h):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;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideShow.init({
     MainID:'main',     // the unique ID name of the main images parent DIV. (string)
    // ThumbsID:'thumbs', //(optional) the unique ID name of the thumbnail images parent DIV. (string, default = no thumbnails)
    // ThumbsOpacity:50,  //(optional) the thumbnail images opacity(1-100).                   (number, default = 50)
     Animate:1000,      //(optional) the fade duration in millisec.                         (number, default = 1000)
     AutoHold:2000,     //(optional) the auto rotate 'hold' delay in millisec.              (number, default = Animate*4)
     AutoStart:2000     //(optional) the auto rotate 'start' delay in millisec.             (number, default = no auto start)
    })
    
    
    /*]]>*/
    </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/

  • #4
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @vwphillips ... yes this worked!

    Thank you both for your help.

  • #5
    New Coder
    Join Date
    Nov 2013
    Location
    UK
    Posts
    42
    Thanks
    6
    Thanked 1 Time in 1 Post
    yeap, that's the one...
    Last edited by VIPStephan; 01-08-2014 at 10:05 PM.


  •  

    Posting Permissions

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