SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    one button slider

    Im building a folio site and i was wondering how would i get a slider that only uses one button, which when clicked the slider slides through a list of images and loops back to the start image when the end image is reached?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    The easiest way to add an image slider to a web page (especially if you don't have much experience with JS) is to use a plugin.
    Here's a recent list of good ones (including demos).
    I would look for one that does what you want and use that.

    If you need any help with the implementation, or really, absolutely, definitely need one that only has one button, then let us know and I'm sure we'll be able to help.

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, I would like to definitely have one button controlling the slider as its apart of the design of my folio site.

    here is the link http://jpcallandesigns.com/

    I want to be able to click the light globe and then have the slider move to next image on each click until the last image then have it go back to the start image

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could adapt bxSlider to do that by manipulating the CSS. It's my favorite slider.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Yeah, bxSlider seems a good choice.
    Why don't you implement that and let us know how you get on.

  6. #6
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ill give the bx slider ago and ill let you guys know cheers

  7. #7
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would it be possible to link one button to different sections using different id's?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I'm not really sure what you mean.
    The best thing would be to implement the bxSlider with a few slides on the page you linked to, then we have some code to go on.

  9. #9
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so like:

    <section id="one"> Page 1 </section>

    <section id="two"> Page 2 </section>

    <section id="three"> Page 3 </section>

    <section id="four" > Page 4 </section>

    then link a button to loop through these four sections

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I'm still not really sure what you are aiming at.

    Quote Originally Posted by cal0002 View Post
    then link a button to loop through these four sections
    The code is fine, but this sentence doesn't really make much sense for me.

  11. #11
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Sorry, I'm still not really sure what you are aiming at.



    The code is fine, but this sentence doesn't really make much sense for me.


    yeah im not sure of an easy way of explaining it, i just want to be able to click through different sections of the site using only one button, i think i may have to think of something else in terms of navigation

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Well, if you just go ahead and add the bxSlider (with a few slides) to the page you linked to, that'll give us more to go on.
    I'm sure it won't be too difficult to set it up as you require.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    bxSlider, by default, has left/right buttons for scrolling the images right or left. My suggestion would be to keep only the right pointing button, but move it over far left, and style it to include the light bulb image. All that is easy with CSS, and you'd get the effect you were mentioning initially.

  14. #14
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Well, if you just go ahead and add the bxSlider (with a few slides) to the page you linked to, that'll give us more to go on.
    I'm sure it won't be too difficult to set it up as you require.
    Here is the link with slider on the page, i want the light globe button on the left to be the slider button, thanks for your help

    http://www.jpcallandesigns.com/

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cal0002 View Post
    Here is the link with slider on the page, i want the light globe button on the left to be the slider button
    OK, see my post above yours (#13). I would style this button to include the lightbulb image and move it to the left:

    Code:
    <a class="bx-next" href="">Next</a>

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    As an example, I added in these styles to your page as an experiment:

    Code:
    .bx-wrapper .bx-next {
    left: -350px !important;
    top: 0 !important;
    width: 260px !important; 
    height: 666px !important;
    background: url(http://www.jpcallandesigns.com/light%20globe.png) no-repeat 0 0 !important;
    }
    
    .globe {
    display: none;
    }
    I had to use !important to override your other styles, but you wouldn't need them in the end.

  17. #17
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks so much its working all i have to do now is get my hover affect working again i take it ill have to change it to .bx-next:hover ?

  18. #18
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in principle

    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[*/
    
    #tst {
      position:absolute;overflow:hidden;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    #tst IMG {
      width:400px;height:300px;float:left;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:4000px;height:300px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Next" onmouseup="zxcMultiSlider.Next('tst',1);"/>
    <input type="button" name="" value="Back" onmouseup="zxcMultiSlider.Next('tst',-1);"/>
    <input type="button" name="" value="Auto" onmouseup="zxcMultiSlider.Auto('tst');"/>
    <input type="button" name="" value="Pause" onmouseup="zxcMultiSlider.Pause('tst');"/>
    <input type="button" name="" value="GoTo 0" onmouseup="zxcMultiSlider.GoTo('tst',0);"/>
    <input type="button" name="" value="GoTo 1" onmouseup="zxcMultiSlider.GoTo('tst',1);"/>
    <input type="button" name="" value="GoTo 2" onmouseup="zxcMultiSlider.GoTo('tst',2);"/>
    <input type="button" name="" value="SwapSlide 0" onmouseup="zxcMultiSlider.SwapSlide('tst',0);"/>
    <input type="button" name="" value="SwapSlide 1" onmouseup="zxcMultiSlider.SwapSlide('tst',1);"/>
    
    <div id="tst" >
     <div class="slide" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
     </div>
     <div class="slide" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="image" />
     </div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMultiSlider={
    
     SwapSlide:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.Pause(id);
       o.ary[o.n][0][0].style.visibility='hidden';
       o.n=n;
       o.ary[n][0][0].style.visibility='visible';
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.ary[o.n][1]+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[o.n][2][n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,0,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),clds=p.childNodes,ary=[],n=0,z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        clds[z0].style.visibility=ary.length!=n?'hidden':'visible';
        ary.push([[clds[z0],'left',0],0,clds[z0].getElementsByTagName('IMG')]);
       }
      }
      o.id=id;
      o.ary=ary;
      o.n=n;
      o.ud=1;
      o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
      o.h=typeof(h)=='number'&&h>0?h:o.ms*4;
      this['zxc'+id]=o;
      typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
     },
    
     rotate:function(o,n,au){
      this.Pause(o.id);
      var a=o.ary[o.n],lgth=a[2].length-1;
      o.auto=au===true;
      o.auto?n=a[1]+o.ud:null;
      n=n>lgth?0:n<0?lgth:n;
      a[1]=n;
      this.animate(o,a[0],a[0][2],-a[2][n].offsetLeft,new Date(),o.ms);
     },
    
     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(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[2]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       a[0].style[a[1]]=t+'px';
       o.auto?oop.Auto(o.id,o.h):null;
      }
     }
    
    }
    
    zxcMultiSlider.init({
     ParentID:'tst',  // the unique Id name of the parent DIV.                     (string)
     Animate:1000,    //(optional) the animation duration in milli seconds.        (number, default = 1000)
     AutoHold:3000,   //(optional) the auto rotate 'hold' delay' in milli seconds. (number, default = 1000)
     AutoStart:1000   //(optional) the auto start delay' in milli seconds.         (number, default = no auto start)
    });
    
    /*]]>*/
    </script></body>
    
    </html>

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cal0002 View Post
    all i have to do now is get my hover affect working again i take it ill have to change it to .bx-next:hover ?
    Yes, that would work nicely. I would make a sprite image that includes the non-hover and hover states, and shift the background position on hover.


Bookmarks

Posting Permissions

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