UI Modification à jQuery scrollTo: Fade Précédent/contrôles Suivant lorsque rien pour faire défiler

Question

http://cambridgeuplighting.com/portfolio

Je suis en train de créer une fonction qui Fader Suivant et Précédent contrôle pour une fonction scrollTo lorsque le diaporama a atteint l'une des extrémités . J'ai un bon début mais ça ne marche pas comme je le veux. J'ai besoin des contrôles pour faire disparaître le clic AVANT qu'il atteigne la fin. En ce moment, il atteint la fin, puis le prochain clic (qui ne défilera pas parce qu'il est à la fin) va s'estomper le contrôle.

Voici mon code, merci beaucoup à l'avance!

jQuery (voir s'il vous plaît le lien ci-dessus pour le site HTML et CSS)

jQuery(function($){ 
    var itemSize = $('div.portfolioPost').size(); 
    var containerWidth = itemSize*240; 
    //set the width of the container depending on how many post items are there 
    $('#postContainer').css({'width': containerWidth }) 
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference) 
    var endPoint = 0-containerWidth+961; 
    $('.olderEvents').click(function() { 
     $('.newerEvents').fadeTo(350, 1.0) 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left<=endPoint) { 
      $('.olderEvents').fadeTo(350, 0.1) 
     } else { 
      $('#slideScreen').scrollTo('+=960', 700); 
     } 
    }); 

    $('.newerEvents').click(function() { 
     $('.olderEvents').fadeTo(350, 1.0) 
     var slidePos = $('#postContainer').position(); 
      //relative position of 0 means the slideshow is at the other end 
     if (slidePos.left==0) { 
      $('.newerEvents').fadeTo(350, 0.1) 
     } else { 
      $('#slideScreen').scrollTo('-=960', 700); 
     } 
    }); 
}); 

Answer 1

@ greg-J: Je suis d'accord avec vos commentaires sur l'efficacité de la désactivation des contrôles. Voici mon code qui fait défiler le premier élément une fois que vous avez atteint la fin de la liste. Voir l'exemple @http://cambridgeuplighting.com/portfolio

jQuery(function($){ 
     var itemSize = $('div.portfolioPost').size(); 
    var containerWidth = itemSize*240; 
    $('#postContainer').css({'width': containerWidth }) 
    var endPoint = 0-containerWidth+961; 
    $('.olderEvents').click(function() { 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left<=endPoint) { 
      $('#slideScreen').scrollTo('-='+containerWidth, 1000); 
     } else { 
      $('#slideScreen').scrollTo('+=480', 500); 
     } 
    }); 

    $('.newerEvents').click(function() { 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left==0) { 
      $('#slideScreen').scrollTo('+='+containerWidth, 1000); 
     } else { 
      $('#slideScreen').scrollTo('-=480', 500); 
     } 
    }); 
}); 

Answer 2

Je dirais que la fonctionnalité souhaitée est unintuitive à l'utilisateur. Plutôt que de désactiver un contrôle que l'utilisateur utilise déjà; en les obligeant à reconnaître et à initier l'utilisation d'un autre contrôle, je dirais qu'il est plus utile de remapper ce contrôle à une fonction intuitive pour l'utilisateur.

Dans ce cas, cela permettrait à l'utilisateur d'utiliser ce contrôle pour naviguer dans la liste dans l'ordre inverse. Abordez ceci comme essayer de fournir à l'utilisateur l'outil le plus utile pour naviguer dans votre contenu. Pensez-y de cette façon: Quelle est la meilleure façon d'utiliser/visualiser/trier une pile de livres? Alignez-les dans une rangée et demandez à l'utilisateur de déplacer la rangée d'avant en arrière, ou arranger les livres sur un lazy-susan et permettre à l'utilisateur de le faire pivoter? La métaphore ici est plus à propos de permettre à l'utilisateur de voir le contenu comme une chaîne ininterrompue par opposition à une chaîne avec des extrémités, et moins sur la représentation visuelle d'un cercle ou une ligne.

Un exemple approprié de cette méthodologie est représentée ici: http://www.ndoherty.biz/demos/coda-slider/2.0/