Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • To add pause/stop functionality on mouse hover using easySlider1.7

    • 0
    • 1
    • 1
    • 2
    • 0
    • 0
    • 0
    • 0
    • 542
    Comment on it

    To add pause/stop functionality on mouse hover using easySlider1.7

    Step 1: Open easySlider JS file in editor like notepad, notepad++ etc.

    Step 2: Go to line number 56, and add below bold marked line.

    continuous:    false, 
    numeric:         false,
    numericId:     'controls' ,
    hoverPause:    false
    

    Step 3: Now add controls related code inside 'each' function before closing of it. The code as below

    this.each(function() {
    // lots of code here...
    ................................
    ................................
    if (options.hoverPause && options.auto){
        $(this).mouseenter(function(){
            animate("stop",true);
        });
        $(this).mouseleave(function(){
            if (options.continuous) {
                animate("next",false);
            } else {
                 animate("next",true);
            }
        });
    };
    });
    

    If you are using easySlider in one place then you can use DIV id instead of (this) in above code. Like

    $(#homeSlider).mouseenter(function(){
    .......................
    

    Step 4: There is a section called function animate (dir, clicked), easySlider use this function to all animation events like stop, pause, previous, next etc. Here we will add one more case to implement our pause functionality.

    case "stop":
    t = t;
    break;
    

    Step 5: Now in the last step, you will add one line of code inside your on-load function. Example as below:

    <script type="text/javascript">
        $(function(){
            $("#homeSlider .slider, #photGalery .imgGallery").easySlider({
                auto: true, 
                continuous: true,
                hoverPause:true
            });
        });
    </script>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: