Pergunta

Olá a todos, aqui é o local veja abaixo

Eu tenho um pequeno problema jquery e eu não consigo descobrir como depurá-lo.

a tira de miniaturas é suposto para rolar quando você passa o mouse sobre ele. Quando a página é carregada, ou cargas sobre a atualização forçada, eles não rolagem.

Se eu atualizar a página (normalmente, não uma atualização forçada), ele funciona bem.

Todas as idéias?

---------------- ATUALIZAÇÃO -------------------

Aqui está uma versão limpa com nenhum outro código na maneira:

link aqui

E aqui está o JS código que estou usando para produzir o pergaminho

Veja a segunda metade para o código que faz com que rolar.

   $(document).ready(function() {
    $('#slideshow').cycle({
  fx:     'fade', 
    next:   '#next', 
 pause: 1,
    prev:   '#prev',
 pause: '#pause',
 pager:  '.thumbs',
 pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
 pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
      //Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" width="75" /></a></li>'; 
     //  return '<li><a href="#"><img src="' + src + '"  height="90" /></a></li>'; 
                } 
 });
$(function() {
    //Pause slideshow on page load
    $("#slideshow").cycle('pause');

});


 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 //Get menu width
 var divWidth = div.width();
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 //Find last image container
 var lastLi = ul.find('li:last-child');
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});
Foi útil?

Solução

Talvez se você pudesse postar o código que seria mais fácil do que navegar na página para o exato incluem você está se referindo ...

De qualquer forma, eu aposta você não está colocando seus métodos de inicialização como eles devem ser para garantir o DOM é totalmente carregada:

$(function (){
  // Put everything you want to run on page load here, to ensure it's
  // only run when the DOM has loaded entirely.
});

Outras dicas

Eu tive um problema muito semelhante.

Eu também tentei mudar document.ready () para window.load (), mas não resolver o meu problema.

Depois de muita lotes de R & D, descobri que os tamanhos de imagem estavam causando este problema. minha exigência era de 400 * 400 px imagens, mas eu estava usando imagens enormes por exemplo algumas imagens foram acima de 1080p.

Quando eu re-dimensionados minhas imagens e imagens thoses enviados por re ... funcionou.

Eu acho que é porque você está usando height() ou métodos posição similar antes da carga imagens.

No entanto, sem ver o código fonte não posso dizer com certeza.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top