jQuery Gallery - Webkit problems.

Question

Okay. So I've got a a little jQuery gallery scroller I wrote to work with WordPress. It works beautifully in Firefox, but it doesn't work in Chrome or Safari.

Here's the link:

http://thehousinggroup.info/our-gallery/bathroom-renovations/gallery-1/

Here's the jQuery:

    var imageQuantity = $('.galleryBox img').size() //finds the number of images
    var wrapWidth = imageQuantity * 610 + 'px' //sets inner wrapper to image width*no. of images

    //Formating
    $('.galleryBox img')
        .hide()
        .unwrap()
        .wrapAll('<ul></ul>')
        .wrapAll('<div id="innerWrap"></div>')
        .wrap('<li></li>');//wraps images in ul and div, strips off the <p> that WordPress adds
    $('#innerWrap').css({
        'width' : wrapWidth,
        'position' : 'relative'
    });
    $('.galleryBox').css({'overflow' : 'hidden'}); //this css will be relegated to the stylesheet eventually...
    $('.galleryBox ul').css({'list-style' : 'none'});
    $('.galleryBox li').css({
        'float' : 'left',
        'margin-right' : '10px'
    });
    $('.galleryBox img').show(); //shows the images once the formatting is complete

    //Scroll Controls

    var currentNumber = 1; //this is for the "1 of 4" counter
    var fullNumber = imageQuantity;

    $('#innerWrap').before('<p id="scroller"><a id="prevButton" href="">previous</a> <span id="currentNumber">' + currentNumber + '</span> of ' + fullNumber +' <a id="nextButton" href="#">next</a></p>'); //this places the next, previous, and 1 of # counter buttons 
    $('#nextButton').click(function(event){
        event.preventDefault();
        var wrapPosition = parseInt($('#innerWrap').css('right'));
        var stopPoint = (fullNumber-1)*610;
        if(wrapPosition < stopPoint) { //sets the scrolling to stop at last image
            $('#innerWrap').animate({'right' : "+=610px"});
            ++currentNumber;
            $('#currentNumber').empty().html(currentNumber); //sets the counter to the proper number
        }
    });
    $('#prevButton').click(function(event){ //same as above, reversed out for the previous button
        event.preventDefault();
        var wrapPosition = parseInt($('#innerWrap').css('right'));
        var stopPoint = (fullNumber-1)*610;
        if(wrapPosition > 0) {
            $('#innerWrap').animate({'right' : "-=610px"});
            --currentNumber;
            $('#currentNumber').empty().html(currentNumber);
        }

    });

I'm going to be setting the css to be in the stylesheets, but this is how it's set up for now. If you've got any further critiques, I'm open!

Thanks.

Answer 1

This code is breaking in Chrome : var wrapPosition = parseInt($('#innerWrap').css('right'));

So it's skipping over this block:

        if(wrapPosition < stopPoint) {
            $('#innerWrap').animate({'right' : "+=610px"});
            ++currentNumber;
            $('#currentNumber').empty().html(currentNumber);
        }

Answer 2

This line catches my attention:

$('#innerWrap').animate({'right' : "-=610px"});

Specially because there is no "right" property initially set up on WebKit.

Try to have the calculation done one step above:

right_pos = doTheMathHere;
$('#innerWrap').animate({'right' : rigt_pos});

Answer 3

Sorry to answer my own question

I think I figured it out. It has to do with the wrapAll() order. I intended for the <ul> to be wrapped inside the <div>, but the opposite is happening. This isn't a problem with Webkit. It's more one of those..."wait...why does this work in Firefox" sorts of issues.