TxReplay
  • I'm a new member :)


      Reputation : 0
      Registered on : 2012-04-26
      Posts : 3
    Hello, I'm French, so it's not easy for me. So I use Google Translation :)

    In fact, I started with this tutorial: http://cssglobe.com/lab/easyslider/02.html
    Everything is given, code, demo etc. ... But since I have to adapt, and that's exactly what I'm looking, I must make some changes. [list]
    [*] An animation automatically scroll every x seconds.
    [*] When you get to the last frame, it returns to the first and vice versa.
    [*] Therefore, the two arrows are always visible regardless of the current image. (Currently, if one is to the first image, "Previous" is hidden, ditto for "Next" when you're at the end). [/ list]

    I've managed to replace text with images of arrows. I found a few rows to be deleted to reveal the arrows, but it works only in the beginning when we return to an image, it disappears ...

    I leave you my code:

    HTML:
    Code:

    <div id="slider">
             <ul>
                <li><img src="img/img1.png" /></li>
                <li><img src="img/img2.png" /></li>
                <li><img src="img/img3.png" /></li>
             </ul>
          </div>
          <script>
             $(document).ready(function(){   
             $("#slider").easySlider({
             orientation:'vertical'
             });
             });
             </script>
    CSS:
    Code:

    #slider {
       position: absolute;
       top: 30%;
       left: 5%;
    }

    #slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
    }

    #slider, #slider li {
    width:228px;
    height:331px;
    overflow:hidden;
    }
    Javascript:
    Code:

    (function($) {

       $.fn.easySlider = function(options){
        
          // default configuration properties
          var defaults = {
             prevId:       'prevBtn',
             prevText:       '<img src="img/flecheh.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 10%"/>',
             nextId:       'nextBtn',   
             nextText:       '<img src="img/flecheb.png" width="30px" height="30px" style="position: absolute; top: 81%; left: 13%"/>',
             orientation:   '', //  'vertical' is optional;
             speed:          2000         
          };
          
          var options = $.extend(defaults, options); 
          
          return this.each(function() { 
             obj = $(this);             
             var s = $("li", obj).length;
             var w = obj.width();
             var h = obj.height();
             var ts = s-1;
             var t = 0;
             var vertical = (options.orientation == 'vertical');
             $("ul", obj).css('width',s*w);         
             if(!vertical) $("li", obj).css('float','left');
             $(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
             $("a","#"+options.prevId).hide();
             $("a","#"+options.nextId).hide();
             $("a","#"+options.nextId).click(function(){      
                animate("next");
                if (t>=ts) $(this).fadeOut();
                $("a","#"+options.prevId).fadeIn();
             });
             $("a","#"+options.prevId).click(function(){      
                animate("prev");
                if (t<=0) $(this).fadeOut();
                $("a","#"+options.nextId).fadeIn();
             });   
             function animate(dir){
                if(dir == "next"){
                   t = (t>=ts) ? ts : t+1;   
                } else {
                   t = (t<=0) ? 0 : t-1;
                };                        
                if(!vertical) {
                   p = (t*w*-1);
                   $("ul",obj).animate(
                      { marginLeft: p },
                      options.speed
                   );            
                } else {
                   p = (t*h*-1);
                   $("ul",obj).animate(
                      { marginTop: p },
                      options.speed
                   );               
                }
             };
             if(s>1) $("a","#"+options.nextId).fadeIn();   
          });
        
       };

    })(jQuery);

    Someone can help me to make what I want ? I don't know Javascript... Thanks so much for your help ;)

    Niko
    • Administrator

        Reputation : 320
        Registered on : 2012-02-22
        Posts : 2366
        School of codes courses: coming soon
      Hello,

      can you provide a screen of what you see? Your wrong page... :bene:
      Thanks...



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      TxReplay
      • I'm a new member :)


          Reputation : 0
          Registered on : 2012-04-26
          Posts : 3
        Sure.

        Image 1 :

        Need help in Javascript 111

        Image 2 :
        Need help in Javascript 211

        Image 3 :
        Need help in Javascript 310

        Thanks for your help ;)

        Niko
        • Administrator

            Reputation : 320
            Registered on : 2012-02-22
            Posts : 2366
            School of codes courses: coming soon
          And isn't this okay? :Good:



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          Niko
          • Administrator

              Reputation : 320
              Registered on : 2012-02-22
              Posts : 2366
              School of codes courses: coming soon
            Hello,

            As the issue is solved, the topic is moved to Solved topics
            If not, send a private message to a manager :bene:

            See you on the Forum of Codes



            Niko wants you in the team Guest

            Community manager and Administrator at Forumattivo.com

            TxReplay
            • I'm a new member :)


                Reputation : 0
                Registered on : 2012-04-26
                Posts : 3
              I wanted an automatic slider and have the two arrows whatever image.

              Niko
              • Administrator

                  Reputation : 320
                  Registered on : 2012-02-22
                  Posts : 2366
                  School of codes courses: coming soon
                Hello,

                As anyone replied to this topic after 15 days from the latest comment's date, the problem is considered solved or abandonated.

                This topic is locked, thanks for the opening of another topic, of course be care of Respecting the rules. You can ask to open this topic sending me a Private message.

                See you on the Forum of Codes



                Niko wants you in the team Guest

                Community manager and Administrator at Forumattivo.com