Галерея jQuery - проблемы с Webkit

Question

Хорошо. Итак, у меня есть небольшой скроллер галереи jQuery, который я написал для работы с WordPress. Он прекрасно работает в Firefox, но не работает в Chrome или Safari.

Вот ссылка:

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

Вот 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);
        }

    });

Я собираюсь установить CSS в таблицах стилей, но сейчас это так. Если у вас есть дальнейшие критические замечания, я открыт!

Спасибо.

Answer 1

Эта строка привлекает мое внимание:

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

Особенно потому, что в WebKit изначально не настроено свойство "right".

Попробуйте выполнить расчет на один шаг выше:

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

Answer 2

Извините, что отвечаю на мой вопрос

Кажется, я понял это. Это связано с порядком wrapAll (). Я намеревался обернуть <ul> внутри <div>, но происходит обратное. Это не проблема с Webkit. Это еще один из тех ... "подожди ... почему это работает в Firefox"?

Answer 3

Этот код ломается в Chrome: var wrapPosition = parseInt($('#innerWrap').css('right'));

Итак, он пропускает этот блок:

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