SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery and image

    i need help with this code
    am trying to create a photobox where one image fadeout and another in
    <div id="photo">i have couple of images here</div>
    the problem is that all my images are displayed in the box at a time

    as if this code is not doing anything

    $(document).ready(function() {
    rotatePics(1);
    });

    function rotatePics(currentPhoto) {
    var numberOfPhotos = $('#photo img').length;
    currentPhoto = currentPhoto % numberOfPhotos;

    $('#photo img').eq(currentPhoto).fadeout(function() {

    //
    $('#photo img').each(function(i) {
    $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
    });

    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
    });
    }

  2. #2
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you're trying to adjust the stacking of the images. However, images are inline by default. Do you have the images styled so that they can stack on each other? The images will need to be positioned with CSS for this technique to work, I believe.

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i have it stack in css like this

    #photo {
    overflow: hidden;
    }


    but issue now is that the jquery code is not working in IE


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
  •