Galerie jQuery - Problèmes de Webkit

Question

OK. J'ai donc une petite galerie de jQuery que j'ai écrite pour travailler avec WordPress. Cela fonctionne merveilleusement bien dans Firefox, mais cela ne fonctionne pas dans Chrome ou Safari.

Voici le lien:

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

Voici le 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); 
     } 

    }); 

Je vais être régler le css être dans les feuilles de style, mais c'est la façon dont il est mis en place pour l'instant. Si vous avez d'autres critiques, je suis ouvert!

Merci.

Answer 1

Cette ligne attire mon attention:

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

Spécialement parce qu'il n'y a "right" propriété initialement mis en place sur WebKit.

Essayez d'avoir le calcul fait une étape ci-dessus:

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

Answer 2

Ce code se brise dans Chrome: var wrapPosition = parseInt($('#innerWrap').css('right'));

Il est sauter sur ce bloc:

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

Answer 3

Désolé pour répondre à ma propre question

Je pense que je compris. Cela a à voir avec l'ordre wrapAll(). Je voulais que le <ul> soit enveloppé dans le <div>, mais le contraire est en train de se produire. Ce n'est pas un problème avec Webkit. C'est plus un de ceux ... "attendez ... pourquoi cela fonctionne dans Firefox" sortes de problèmes.