HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Need help in Javascript

    avatar
    • 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 ;)

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2317
          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

        avatar
        • I'm a new member :)


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

          Image 1 :



          Image 2 :


          Image 3 :


          Thanks for your help ;)

          avatar
          • Administrator

              Reputation : 315
              Registered on : 2012-02-22
              Posts : 2317
              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

            avatar
            • Administrator

                Reputation : 315
                Registered on : 2012-02-22
                Posts : 2317
                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

              avatar
              • 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.

                avatar
                • Administrator

                    Reputation : 315
                    Registered on : 2012-02-22
                    Posts : 2317
                    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


                  YOUR BANNER HERE
                  728x90
                  DMCA.com Protection Status
                  Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum