SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photo Slideshow Function or CSS problem?

    Hello! I'm very relatively new to JavaScript and web design/development. Trying to read books about it and all the different types of languages. Today, I started working on a personal project. On one of the pages, I've been trying to work on... the JS or CSS for it or something isn't right and the photos aren't displaying or anything.. just the empty picture symbol in the upper right hand corner. Ugh! Been searching online for solutions and came up with zilch, goose egg, nada. Could be doing something wrong as a beginner, but was wondering if anyone could help me figure it out? Any advice would be nice as well

    Here's the script:

    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next = $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    $(function() {
    setInterval( "slideSwitch()", 3000 );
    });


    Then here's the CSS:


    #slideshow {
    position:relative;
    height:350px;
    }


    #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    }


    #slideshow IMG.active {
    z-index:10;
    }


    #slideshow IMG.last-active {
    z-index:9;
    }


    And in the body to call it (if that's the terminology?) I have:

    <div id="slideshow">
    <img src="1.jpg" alt="" class="active" />
    <img src="2.jpg" alt="" />
    <img src="3.jpg" alt="" />
    <img src="4.jpg" alt="" />
    </div>



    Thank you!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Telo. We really need to see a live link to be able to help. Is that possible?

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is nothing else to the code than that. I was just testing to see if it worked when previewing. Maybe I put it into the source code file wrong?

    Honestly, don't know exactly what I'm doing... sorry for the troubles.

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">


    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next = $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    $(function() {
    setInterval( "slideSwitch()", 3000 );
    });


    </script>

    <style type="text/css">

    #slideshow {
    position:relative;
    height:350px;
    }


    #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    }


    #slideshow IMG.active {
    z-index:10;
    }


    #slideshow IMG.last-active {
    z-index:9;
    }


    </style>
    </head>

    <body>
    <div id="slideshow">
    <img src="1.jpg" alt=" class="active" />
    <img src="2.jpg" alt="" />
    <img src="3.jpg" alt="" />
    <img src="4.jpg" alt="" />
    </div>
    </body>
    <html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm no JS buff, but it looks like your code is referencing a library (like jQuery) so you'd need a link to the library that is being referenced, too. E.g.

    Code:
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
     your script here
    </script>
    I'm just guessing here, though. Where did you get that JavaScript code?

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I added that it still didn't work.

    I got the code online... at least for referencing/help.
    Did some research on some learning JS sites and it seemed right?
    As mentioned before... a noob at all this.
    Will continue to look about though.

    If a solution can't be found, this part can be dropped from the project.
    It's not major.

    Thanks for the suggestion

    ---------------------------------------------------

    Update! Figured it out. Got it fixed. Thanks for your help @ralph.m


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
  •