Essayer de créer le défilement navigation miniature horizontale qui se cache sur le côté gauche lorsque vous ne l'utilisez

Question

Je suis en train de recréer le type suivant de défilement navigation des vignettes comme décrit dans le tutoriel suivant:

http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/

je besoin de mes pouces glisser horizontalement à partir de la gauche. J'ai modifié le code au mieux de mes capacités, mais je n'arrive pas à le faire fonctionner. (Pensez que le problème est dans le tiers supérieur de la jquery).

Voici ce que je dois à ce jour:

HTML

<ul class="menu" id="menu"> 
    <li> 
     <a href="#"></a> 
     <div class="sc_menu_wrapper"> 
      <div class="sc_menu"> 
       <a href="#"><img src="images/gallery/1.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/2.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/3.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/4.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/5.jpg" alt=""/></a> 
      </div> 
     </div> 
    </li> 
    </ul> 

CSS

/* Navigation Style */ 
ul.menu{ 
position: fixed; 
top: 0px; 
left:0px; 
width: 100%; 
} 

ul.menu li{ 
position:relative; 
width: 100% 
} 

ul.menu li > a{ 
position:absolute; 
top:300px; 
left:0px; 
width:40px; 
height:200px; 
background-color:#e7e7e8; 
} 

/* Thumb Scrolling Style */ 

div.sc_menu_wrapper { 
position: absolute; 
right: 0px; 
height: 220px; 
overflow: hidden; 
top: 300px; 
left:0px; 
visibility:hidden; 
} 

div.sc_menu { 
height: 200px; 
visibility:hidden; 
} 

.sc_menu a { 
display: block; 
background-color:#e7e7e8; 
} 
.sc_menu img { 
display: block; 
border: none; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

JQUERY

$(function(){ 

     // function to make the thumbs menu scrollable 
      function buildThumbs($elem){ 
       var $wrapper  = $elem.next(); 
       var $menu  = $wrapper.find('.sc_menu'); 
       var inactiveMargin = 220; 

       // move the scroll down to the beggining (move as much as the height of the menu) 

       $wrapper.scrollRight($menu.outerHeight()); 

       //when moving the mouse up or down, the wrapper moves (scrolls) up or down 

       $wrapper.bind('mousemove',function(e){ 

        var wrapperWidth = $wrapper.width(); 
        var menuWidth = $menu.outerWidth() + 2 * inactiveMargin; 
        var top  = (e.pageX - $wrapper.offset().right) * (menuWidth - wrapperWidth)/wrapperWidth - inactiveMargin; 

        $wrapper.scrollRight(right+10); 
       }); 
      } 

     var stacktime; 

     $('#menu li > a').bind('mouseover',function() { 
      var $this = $(this); 

      buildThumbs($this); 

      var pos = $this.next().find('a').size(); 
      var f = function(){ 
       if(pos==0) clearTimeout(stacktime); 
       $this.next().find('a:nth-child('+pos+')').css('visibility','visible'); 
       --pos; 
      }; 

      // each thumb will appear with a delay 
      stacktime = setInterval(f , 50); 
     }); 


     /// on mouseleave of the whole <li> the scrollable area is hidden 
     $('#menu li').bind('mouseleave',function() { 
      var $this = $(this); 
      clearTimeout(stacktime); 
      $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden'); 
      $this.find('.sc_menu_wrapper').css('visibility','hidden'); 
     }); 

     // when hovering a thumb, change its opacity 
     $('.sc_menu a').hover(
     function() { 
      var $this = $(this); 
      $this.find('img') 
      .stop() 
      .animate({'opacity':'1.0'},400); 
     }, 
     function() { 
      var $this = $(this); 
      $this.find('img') 
      .stop() 
      .animate({'opacity':'0.3'},400); 
     } 
); 
    }); 

Vous vous demandez si un œil d'aigle pourrait être en mesure de signaler là où je un Je vais mal. Comme ma connaissance de JQuery est limitée, je suppose que c'est là.

J'apprécie vraiment quiconque prend le temps de regarder cela.

Merci!

Answer 1

J'ai posté un demo pour vous :)

Je ne pouvais pas votre code pour travailler avec la démo, mais la première chose qui a besoin de changer est de tous les droits à gauche. Il n'y a rien de tel que scrollRight. Voici juste la première fonction du code avec ces problèmes corrigés.

// function to make the thumbs menu scrollable 
     function buildThumbs($elem){ 
      var $wrapper  = $elem.next(); 
      var $menu   = $wrapper.find('.sc_menu'); 
      var inactiveMargin = 220; 

      // move the scroll down to the beggining (move as much as the height of the menu) 

      $wrapper.scrollLeft($menu.outerHeight()); 

      //when moving the mouse up or down, the wrapper moves (scrolls) up or down 

      $wrapper.bind('mousemove',function(e){ 

       var wrapperWidth = $wrapper.width(); 
       var menuWidth = $menu.outerWidth() + 2 * inactiveMargin; 
       var left   = (e.pageX - $wrapper.offset().left) * (menuWidth - wrapperWidth)/wrapperWidth - inactiveMargin; 

       $wrapper.scrollLeft(left+10); 
      }); 
     } 

Oh, et ajouter un float:left dans ce peu de CSS:

.sc_menu img { 
display: block; 
border: none; 
float: left; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

---

Mise à jour pour rendre le travail de défilement et mettre en évidence correctement - il ne peut pas être la méthode la plus efficace de le faire, mais je n'ai pas changé le code autant de l'original. Updated demo here.

CSS

/* Navigation Style */ 
ul.menu{ 
position: fixed; 
top: 0px; 
left:0px; 
width: 100%; 
} 

ul.menu li{ 
position:relative; 
width: 100% 
} 

ul.menu li > a { 
display: block; 
position:absolute; 
top:300px; 
left:0px; 
width:40px; 
height:200px; 
background-color:#e7e7e8; 
} 

/* Thumb Scrolling Style */ 

div.sc_menu_wrapper { 
position: relative; 
height: 220px; 
overflow: hidden; 
top: 300px; 
left: 0px; 
visibility:hidden; 
} 

div.sc_menu { 
height: 195px; 
visibility:hidden; 
overflow: hidden; 
position: absolute; 
top: 0; 
left: 0; 
display: block; 
top: 0; 
left: 0; 
width: 100%; 
} 

.sc_menu a { 
background-color:#e7e7e8; 
} 
.sc_menu img { 
height: 195px; 
width: 130px; 
float: left; 
display: block; 
border: none; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

Script

$(function(){ 
// function to make the thumbs menu scrollable 
function buildThumbs($elem) { 
    var $wrapper = $elem.next(); 
    var $menu = $wrapper.find('.sc_menu'); 
    var leftOffset = $wrapper.offset().left; 

    // move the scroll left to the beggining 
    $wrapper.scrollLeft(0); 
    // make menuWidth (width of all images side by side) include the offset 
    var menuWidth = leftOffset; 
    // calculate the width of the menu by adding each image width (includes any padding, border & margin) 
    $menu.find('img').each(function(){ 
    $(this).css('left', menuWidth); 
    menuWidth += $(this).outerWidth(true); 
    }); 
    // set calculated menu width - if not done, the images will wrap to the next line 
    $menu.width(menuWidth); 

    //when moving the mouse left or right, the wrapper moves (scrolls) left or right 
    $wrapper.bind('mousemove', function(e){ 
    var wrapperWidth = $wrapper.outerWidth(true); 
    var left = (e.pageX - leftOffset) * (menuWidth - wrapperWidth)/wrapperWidth; 
    $wrapper.scrollLeft(left); 
    }); 
} 

var stacktime; 
$('#menu li > a').bind('mouseover', function(){ 
    var $this = $(this); 
    // set up thumbnail scrolling 
    buildThumbs($this); 
    var pos = 0, 
     len = $this.next().find('a').length; 
    var f = function() { 
    if (pos > len) { clearTimeout(stacktime); } 
    $this.next().find('a:nth-child(' + pos + ')').css('visibility', 'visible'); 
    pos++; 
    }; 
    // each thumb will appear with a delay 
    stacktime = setInterval(f, 50); 
}); 

// on mouseleave, the whole the scrollable area is hidden 
$('#menu li').bind('mouseleave', function(){ 
    var $this = $(this); 
    clearTimeout(stacktime); 
    $this.find('.sc_menu').css('visibility', 'hidden').find('a').css('visibility', 'hidden'); 
    $this.find('.sc_menu_wrapper').css('visibility', 'hidden'); 
}); 

// when hovering a thumb, change its opacity 
$('.sc_menu a').hover(function(){ 
    $(this).find('img').stop().animate({ 'opacity': '1.0' }, 400); 
}, function() { 
    $(this).find('img').stop().animate({ 'opacity': '0.3' }, 400); 
}); 
});