scrollTo et les tableaux horizontaux

Je tente de créer un site de portefeuille de défilement horizontal. Je veux que les utilisateurs puissent cliquer sur les images en utilisant un bouton suivant/précédent et en faisant défiler comme d'habitude avec la souris et les barres de défilement. J'ai cependant du mal à l'implémenter en utilisant jquery.scrollTo et les tableaux horizontaux

La table est utilisée car il s'agit des meilleures pratiques sur les sites Web horizontaux. Je souhaite utiliser le plugin scrollTo() pour permettre à la table de faire défiler vers l'avant ou vers l'arrière selon le bouton sur lequel on clique.

Le produit final ressemblerait à this, bien que j'ai essayé d'utiliser le code sur ce site avec NO la chance du tout!

Je suis perdu sur comment faire.

Mon HTML est la suivante:

 <div id="content"> 

    <div id="contentRight"> 

    <ul id="direction"> 

    <li id="next"><a class="forward">Next</a></li> 
    <li id="prev"><a class="back">Previous</a></li> 

    </ul> 

    <table id="work"> 

    <tr> 

    <td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
    <td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 

     </tr> 

     </table> 

    </div> 

</div>

J'ai pas jQuery courant d'ajouter que tout ce que j'ai essayé est juste un gâchis.

Toute aide serait géniale!

Source

2010-07-13 DanC

Ce n'est pas un cas d'avoir accès au fichier, c'est plus que je n'arrive pas à le faire fonctionner! – DanC

HTML

<!DOCTYPE html> 

<html> 
<title>Slider !!</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" ></script> 
</head> 
<body> 
    <div id="content"> 
     <div id="contentRight"> 
      <ul id="direction"> 
       <li id="next"><a href="#" class="forward">Next</a></li> 
       <li id="prev"><a href="#" class="back">Previous</a></li> 
      </ul> 

      <center> 
       <table id="work"> 
        <tr> 
         <td id="horseOneImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseTwoImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseThreeImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseFourImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseFiveImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseSixImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseSevenImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 
         <td id="horseEightImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td> 

        </tr> 
       </table> 
      </center> 
    </div> 
</div> 

</body> 

</html>

javascript

<script type="text/javascript"> 


$(document).ready(function() { 
    var margin = 0; 


    var length = $('.mainImage').length; 
    var width = $('img:first').width(); 
    var height = $('img:first').height(); 

    $('table#work').width(width).height(height).css({overflow:'hidden'}); 
    $('table#work tr').css({width:width*length,height:height,overflow:'hidden',position:'absolute'}); 
    $('td.mainImage,td.mainImage img').css({width:width,height:height}); 

    $('#next').click(function() { 
      margin +=width; 
      if(margin > width*(length-1)) { margin = width*(length-1); return;} 
     $('#wrap').stop().animate({left:"+="+width},1000); 
     $('html,body,table').stop().animate({scrollLeft:"+="+width},1000); 
    }); 

    $('#prev').click(function() { 
      margin -=width; 
      if(margin<0) { margin = 0; return;} 
     $('#wrap').stop().animate({left:"-="+width},1000); 
     $('#prev,#next,html,body,table').stop().animate({scrollLeft:"-="+width},1000); 
    }); 
}); 
</script>

Voici le Demo

Source

2010-07-13 19:26:35

Ceci est génial et fonctionne bien sauf une chose - le parchemin barre au fond se développe tellement qu'il est impossible de revenir en arrière pour voir la première image une fois que vous arrivez à la dernière - la seule façon est de continuer à cliquer sur le bouton précédent. Y at-il de toute façon le même effet peut être fait en ajustant seulement la position de la barre de défilement? – DanC

vous voulez dire, avez-vous besoin d'un handle (contrôleur) pour glisser vos images, me demandez-vous quelque chose comme ça http://bit.ly/i0TUT ?? S'il vous plaît laissez-moi savoir, Si possible, je peux vous aider. Have a Nice Day Dan –

Pas vraiment! Dans votre exemple ci-dessus, lorsque vous cliquez sur 'suivant', cela masque essentiellement les images que vous avez déjà vues, je veux simplement que la table # fasse défiler sur son axe x pour un nombre déterminé de pixels. Quelque chose comme $ ('# forward'). Cliquez sur (function() { \t \t $ ('table # work tr'). Stop().scrollTo ('+ = 738', 800, {axis: 'x'}); \t}); – DanC

Est-ce que cela aide du tout?

jQuery.ScrollTo/jQuery.SerialScroll Horizontal Scrolling

Et je ne suis pas sûr que les tables seraient la voie à suivre ...

Source

2010-07-13 18:44:49

Le tableau entier devrait pouvoir être défilé en utilisant les barres de défilement et pas seulement avec les boutons. Oh et les tables sont assurément la voie à suivre avec les sites horizontaux! – DanC

@DanC c'est une déclaration assez audacieuse. Qu'en est-il des flotteurs? ou Flash? peut-être que ça devrait juste être une liste non ordonnée avec de la magie jQuery. Il n'y a * jamais * une réponse à un problème de programmation. –

Je n'ai jamais dit UNE seule réponse, juste que les tables sont la meilleure façon d'y aller! Consultez l'article sur CSS-Tricks pour plus d'informations - http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ – DanC

Répondre

Questions connexes