Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    carousel animation problem

    Hi folks. I am pulling serious amounts of hair out over this. The problem: make the jcarousel (jQuery slideshow plugin) accept variable width image and center them with no gaps between images. If you don't know jcarousel it doesn't matter...if you know how to animate in JQuery maybe you can help...Mathematically, my solution is correct although hacky, and the result is a slight hitch before each slide animates. A slight, very madding hitch. Please take a look at the example at http://jontakiff.com/brookssite2010/...folio-test.php. It's totally noticeable...the slide moves back just a bit before moving the right way...

    I have made the slideshow work by appropriately changing the left position of all visible elements using the callback function. The basic problem is that the elements are being instructed to move in two directions at once. Rather than setting the left offset for all visible items, it now seems I would need to restructure this to have elements animating to the left or right a certain amount of pixels based on the width of the image. Could someone help me figure out a way to rework the animation for this thing so it doesn't have that hitch?

    Here's the callback function code that makes it ALMOST work correctly:



    Code:
    function mycarousel_itemFirstInCallback(carousel, item) {
    
        var offset=$('div.jcarousel-clip-horizontal').width()-jQuery(item).width();
        var offsetval=offset/2;
    
        jQuery(item).css('left',offsetval); 
        jQuery(item).next().css('left',0);  
        jQuery(item).prev().css('left',offsetval);
        jQuery(item).prev().prev().css('left',offsetval);
        jQuery('div.jcarousel-prev-horizontal').css('width',offsetval);//set button width       
        jQuery('div.jcarousel-next-horizontal').css('width',offsetval);//set button width
        jQuery(item).addClass('layering'); //z-index 
    
    };
    Almost, but no cigar! Ideas.....would be super appreciated!
    Last edited by johnnyblotter; 07-24-2010 at 11:14 PM. Reason: typos


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •