SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    call back funtion help...

    I am trying to put this image effect together (can be found on this site joomlapanel) where theres fading images then once an image have fully come into view a semi transparent box slides up from the bottom and displays text.

    I have this so far, i am having trouble with the call back function. Problem being I dont no how to add it. I have the fading images sorted tho.

    <title>Untitled Document</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script language="javascript" 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()", 5000 );
    });



    </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="kevin1.jpg" height="400" width="300" alt="" class="active" />
    <img src="kevin2.jpg" height="400" width="300" alt="" />
    <img src="kevin3.jpg" height="400" width="300" alt="" /></div>



    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    css-tricks recently had a good article about a very similar technique, that you might learn something from.

    http://css-tricks.com/startstop-slider/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •