Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree1Likes
  • 1 Post By DerrickE

Thread: Image Slider Help!

  1. #1
    Junior Member
    Join Date
    Jul 2014
    Posts
    10
    Member #
    39617

    Image Slider Help!

    I'm trying to put an image slider on a website I'm creating. It cycles through the first two images, but it doesn't go to the third, and it doesn't loop back to the first. It simply stops on the second. Could anyone tell me what is wrong with my code? Normally I could diagnose it myself, but I'm new to JavaScript and jQuery. Thank you!

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    .slider {
    width:800px;
    height:350px;
    overflow:hidden;
    margin:30px auto;
    }

    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    <script type="text/javascript">

    function Slider(){
    $(".slider #1").show("fade",500);
    $(".slider #1").delay(5500).hide("slide",{direction:'left'},5 00);

    var sc=$(".slider img").side();
    var count=2;

    setInterval(function (){
    $(".slider #"+count).show("slide",{direction:'right'},500) ;
    $(".slider #"+count).delay(5500).hide("slide",{direction:'lef t'},500);

    if(count==sc){
    count=1;
    }else{
    count=count+1;
    }
    },6500);

    }

    </script>
    </head>
    <body onload="Slider();">

    <div class="slider">
    <img id="1" src="Car.png" border="0" alt="Car"/>
    <img id="2" src="Home.png" border="0" alt="Home"/>
    <img id="3" src="Boat.png" border="0" alt="Boat"/>
    </div>
    </body>
    </html>

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I don't know if this is causing it, but in the Slider function, you have an extraneous space in the 500 for the .hide method.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jul 2014
    Posts
    10
    Member #
    39617
    That's strange. I don't know why I nor Dreamweaver caught that. I fixed it, though, and it's still not cycling through. Thanks for catching that anyway!

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Are there any errors in the JS console?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Jul 2014
    Posts
    10
    Member #
    39617
    It's a remote file I pulled from Google: https://developers.google.com/speed/...evguide#jquery. I can't edit it.

  7. #6
    Member DerrickE's Avatar
    Join Date
    Jul 2007
    Location
    Houston, TX
    Posts
    58
    Member #
    15580
    Liked
    10 times
    Since you are already pulling jquery in. Here's a pure jquery example that should work right out of the box.

    Remove slider() from the body onload.

    Code:
    <style type="text/css">
            .slider {
                width:800px;
                height:350px;
                overflow:hidden;
                margin:30px auto;
                position:relative;
            }
            .slider img {
                position:absolute;
                width:800px;
                height:350px;
            }
    </style>
    Code:
    $(function(){
        var $img = $('.slider img'),
        n = $img.length,          // get number of images
        c = 0;                    // counter
        $img.not(':eq('+c+')').hide();// hide all images but the one indexed 'c'
        (function loop(){
            $img.delay(3000).hide("slide",{direction:'left'},500).eq(++c%n).show("slide",{direction:'right'},500,loop);
        })();
    });
    blamepenguins likes this.

  8. #7
    Junior Member
    Join Date
    Jul 2014
    Posts
    10
    Member #
    39617
    That did work! Thank you so much! I'll have to study that to figure out exactly what you did (as I said, I'm new to this), but I greatly appreciate your help!

  9. #8
    Member DerrickE's Avatar
    Join Date
    Jul 2007
    Location
    Houston, TX
    Posts
    58
    Member #
    15580
    Liked
    10 times
    Hope this helps explain it a little more.

    The images need to be positioned absolutely inside of the parent div so they are stacked on top of each other. If you dont stack them, then after the end image, they won't display anymore. You basically just shift them all left out of the visible area if you don't stack them.

    As for the function:
    Code:
    $(function(){
        var $img = $('.slider img'), // grabs all of the images under .slider in an array
        n = $img.length,          // get number of images
        c = 0;                    // counter
        $img.not(':eq('+c+')').hide(); // hide all images but the one indexed 'c'
        (function loop(){
            $img.delay(3000).hide("slide",{direction:'left'},500).eq(++c%n).show("slide",{direction:'right'},500,loop);
        })();
    });
    $(function() { = is just a short way of doing $(document).ready( function (). so this function will automatically run when the page is done loading
    Then you set up the variables you will use in your function
    Then you define function loop. The loop at the end is short for loop(). So it's calling itself when it finishes. The delay added there is the timer. It's a short way of running the setTimeout in jquery more or less.


    $img.hide() = hides all of the images, but only one is showing anyways
    ++c%n = increase counter (c) and reset if counter = number of images (c=n)
    .eq() = get the image that is the nth index of $img. so .eq(1) is the first image .eq(2) = 2nd etc.
    .show() = apply show to the selected image
    .show() takes 3 paramaters, that 3rd one is the call back function to run. So it's saying when it's done showing then run the loop function again.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com