jQuery Gallery - Webkit問題

好的。所以我有一個我寫的WordPress的小jQuery畫廊滾動。它在Firefox中非常漂亮，但在Chrome或Safari中無法使用。jQuery Gallery - Webkit問題

這裏的鏈接：

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是在樣式表，但這是它是如何設置目前。如果你有任何進一步的批評，我是開放的！

謝謝。

來源

2010-08-19 Squirkle

該行抓住了我的注意：

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

特別是因爲沒有最初在WebKit上設置的「正確」屬性。

嘗試已經計算完成上面一步：

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

來源

2010-08-19 23:14:18 Frankie

「特別是因爲WebKit最初沒有設置」正確「屬性。」我的問題是我注意到的 - 包裝錯了 - 但這確實是主要問題。我只需要修改數學運算符''innerWrap {right：0}'到我的樣式表中，它沒有問題。謝謝弗蘭基。 – Squirkle 2010-08-23 12:44:31

此代碼是打破在Chrome：var wrapPosition = parseInt($('#innerWrap').css('right'));

因此它跳過此塊：

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

來源

2010-08-19 23:12:19

對不起，回答我的問題

我想我想通了。它與wrapAll（）命令有關。我打算將<ul>包裹在<div>之內，但情況正好相反。這不是Webkit的問題。它更多的是......「等等......爲什麼在Firefox中工作」有點問題。

來源

2010-08-19 23:14:29 Squirkle

jQuery Gallery - Webkit問題

回答

相關問題