1


0

jQueryギャラリー-Webkitの問題

はい。 そこで、WordPressで使用するために作成したjQueryギャラリースクロ​​ーラーを少し用意しました。 Firefoxでは美しく機能しますが、ChromeやSafariでは機能しません。

これがリンクです:

これが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('')
        .wrapAll('')
        .wrap('');//wraps images in ul and div, strips off the  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('previous ' + currentNumber + ' of ' + fullNumber +' next'); //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を設定するつもりですが、これが今の設定方法です。 さらに批評があれば、私はオープンです!

ありがとう。

3 Answer


0


このコードはChromeで壊れています: var wrapPosition = parseInt($( '#innerWrap')。css( 'right'));

したがって、このブロックはスキップされます。

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


0


この行は私の注意を引く:

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

特に、WebKitに最初に設定される「正しい」プロパティがないためです。

上記の1ステップで計算を実行してみてください。

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


0


自分の質問に答えてすみません

私はそれを考え出したと思います。 wrapAll()の順序に関係しています。 私は

の中に包まれます

、しかしその逆が起こっています。 これはWebkitの問題ではありません。 それはもっと多くの…​「待って…​なぜFirefoxでこれが機能するのか」という種類の問題です。