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
    Feb 2014
    Location
    Illinois
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Converting Something to Javascript

    I have this HTML5/CSS code for an image slider that I made and that I want to use on my site. However, I heard in order to make it start, switch slides, then repeat the slides by itself, I need to add or completely convert the coding to javascript.

    Here's the coding, if somebody could please help that would be nice.

    Code:
    <div id="image-slider">
      <div id="slides">
         <span id="slide1"></span>
         <div>
        <img src="http://a1.s6img.com/cdn/box_002/post_12/325092_3128777_b.jpg" alt="Gryffindor" Width=120 Height=180 />
      <h3 class="gryffindorbig"> --</h3>
      </div>
      <span id="slide2"></span>
      <div>
        <img src="http://a1.s6img.com/cdn/box_002/post_12/347321_6632957_b.jpg" alt="Slytherin" Width=120 Height=180 />
       <h3 class="slytherinbig"> --</h3>
      </div>
     <span id="slide3"></span>
      <div>
        <img src="http://a1.s6img.com/cdn/box_002/post_12/347343_12609498_b.jpg" alt="Hufflepuff" Width=120 Height=180 />
    <h3 class="hufflepuffbig"> --</h3>
      </div>
    <span id="slide4"></span>
      <div>
        <img src="http://a1.s6img.com/cdn/box_002/post_12/347349_9674277_b.jpg" alt="Ravenclaw" Width=120 Height=180 />
    <h3 class="ravenclawbig">--</h3>
      </div>
        <div class="default"><img src="nature1.jpg" alt=""></div>
      </div>
      <div id="navigation">
        <a href="#slide1">1</a>
        <a href="#slide2">2</a>
        <a href="#slide3">3</a>
        <a href="#slide4">4</a>
      </div>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Question

    What do you mean by "image slider"?
    What are the images supposed to do?
    Do you have an example site?

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Location
    Illinois
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    What do you mean by "image slider"?
    What are the images supposed to do?
    Do you have an example site?
    Oh, sorry. I meant that an image slides into place, then it slides out, and another one slides in and takes it's place. You can see it here as I have it. Here's a link. Hope this clears up some of the confusion, I realize I was kind of vague in the main post.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Location
    Illinois
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh sorry, I realize now that I was kind of vague in the main post.

    By image slider, I mean when an image slides into place on a site, stays in that places for a bit, slides out, then a new images slides in and takes the original's object's place. Right now on my site, you need to click a button to make the images slide. Here's a link to the site, the buttons with 1 though 4 on them are located on the left near the top.

    I also forgot to mention in the main post that I want the " -- " in the image slider to be editable, not a fixed caption. (I don't think this will be a problem, but I was told I should mention it.)

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    This may or may not fit your needs.
    If you do a search of this forum or google "image gallery" or "slide images" or some such phrase
    you should find a ton of alternative codes.

    The ' -- ' request can be added, but if you plan on having any entry you make be permanent
    keep in mind that JS does not save information. You will need a dBase and/or server to accomplish this.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>5 Image Sliding Banner</title>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1164360#post1164360 -->
    
    <style type="text/css">
    * {margin:0; padding:0}
    body {font:12px Verdana,Arial; color:#555; background:#fff url(images/bg.jpg) 50% 0 no-repeat}
    p {line-height:0; margin-bottom:0px}
    
    #wrapper {width:689px; margin:181px auto}
    #wrapper {
      border:0px solid #a1a1a1; padding:4px 4px; background:#dddddd;
      width:689px; height:181px; border-radius:15px; -moz-border-radius:15px;
      border-bottom-right-radius:0px;
    }
    
    .sliderbutton {float:left; width:200px;}
    .sliderbutton img {cursor:pointer}
    .sliderbutton img:hover {background:#666}
    
    #slider {float:left; position:relative; overflow:auto;
             width:689px; height:181px; border:0px solid #fff; background:#fff}
    #slider ul {position:absolute; list-style:none; top:0; left:0}
    #slider li {float:left; width:689px; height:181px; padding-right:0px}
    
    .pagination {float:right; list-style:none; height:1px; margin:0px 0 0 0px}
    .pagination li {float:left; cursor:pointer; padding:0px 0px; background:#ffffff;
                    border:0px solid #999; margin:100 0px 0 ; text-align:center; color:#222}
    .pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
    
    li.current {border:1px solid #ccc; background:#888}
    
    li#content {width:689px; height:181px; padding:0px 0px 0px 0px}
    
    #content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}
    
    </style>
    
    <script type="text/javascript">
    var TINY={};
    
    function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}
    
    TINY.slider=function(){
     function slide(n,p){this.n=n; this.init(p)}
     slide.prototype.init=function(p){
      var s=T$(p.id), u=this.u=T$$('ul',s)[0], c=T$$('li',u), l=c.length, i=this.l=this.c=0;
      if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
      this.a=p.auto||0; this.p=p.resume||0; this.v=p.vertical||0; s.style.overflow='hidden';
      for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
      if(this.v){;
       u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
      }else{
       u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
      }
      this.pos(p.position||0,this.a?1:0)
     },
     slide.prototype.auto=function(){
      this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
     },
     slide.prototype.move=function(d,a){
      var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
     },
     slide.prototype.pos=function(p,a){
      clearInterval(this.u.ai); clearInterval(this.u.si);
      var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
      t=this.v?p*this.h:p*this.w, d=t>Math.abs(o)?1:-1; t=t*-1; this.c=p;
      if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==p?this.s:''}}
      this.u.si=setInterval(new Function(this.n+'.slide('+t+','+d+','+a+')'),20)
     },
     slide.prototype.slide=function(t,d,a){
      var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
      if(o==t){
       clearInterval(this.u.si); if(a||(this.a&&this.p)){this.auto()}
      }else{
       var v=o-Math.ceil(Math.abs(t-o)*.15)*d+'px';
       this.v?this.u.style.top=v:this.u.style.left=v
      }
     };
     return{slide:slide}
    }();
    </script>
    
    </head>
    <body>
    <div id="wrapper">
     <div>
      <div id="slider">
       <ul>
        <li id="content">
         <img alt='img0' src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg">
        </li>
        <li> <img alt='img1' src="http://www.nova.edu/hpd/otm/pics/4fun/21.jpg"> </li>
        <li> <img alt='img2' src="http://www.nova.edu/hpd/otm/pics/4fun/31.jpg"> </li>
        <li> <img alt='img3' src="http://www.nova.edu/hpd/otm/pics/4fun/41.jpg"> </li>
        <li> <img alt='img4' src="http://www.nova.edu/hpd/otm/pics/4fun/51.jpg"> </li>
       </ul>
      </div>
    		
     </div>
    
     <center><ul id="pagination" class="pagination">
     <li onclick="slideshow.pos(0)"><img src="http://www.nd4rk.comli.com/bu.png"></li>
     <li onclick="slideshow.pos(1)"><img src="http://www.nd4rk.comli.com/bu.png"></li>
     <li onclick="slideshow.pos(2)"><img src="http://www.nd4rk.comli.com/bu.png"></li>
     <li onclick="slideshow.pos(3)"><img src="http://www.nd4rk.comli.com/bu.png"></li>
     <li onclick="slideshow.pos(4)"><img src="http://www.nd4rk.comli.com/bu.png"></li>
     </ul></center>
    </div>
    
    <script type="text/javascript">
    var slideshow=new TINY.slider.slide('slideshow',{
    	id:'slider',
    	auto:5,
    	resume:true,
    	vertical:false,
    	navid:'pagination',
    	activeclass:'current',
    	position:0
    });
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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