JQuery smooth sliding gallery

Question

Problème avec la propriété de la diapositive JQuery UI. Cela devrait produire une douce glisser hors de l'image actuelle alors que l'image suivante glisse doucement.

$(document).ready(function(){ 
    $('.gallery img').hide(); $('.gallery img:first').show().addClass('galo'); 


    $('.galarr.r).click(function(){ 
     var next = $('.galo').next(); 
     $('.galo').hide('slide', {direction:'left'}, {duration:800, queue:false}).removeClass('galo'); $(next).show('slide', {direction:'right'}, {duration:800, queue:false}).addClass('galo'); 
}); 

}); 

Sur notre site Web glisser à la place de l'ancien en laissant un espace vide, puis l'image suivante apparaît soudainement.

J'ai mis en place un violon simple qui ne fonctionne pas du tout malgré avoir les mêmes codes. Quel est le problème.

http://jsfiddle.net/W27YK/7/

Firebug rapporte que nextslide() n'est pas une fonction sur le violon quand il est tout à fait clairement.

Answer 1

Voici un jsFiddle de ce que je pense que vous essayez d'accomplir.

Quelques choses à garder à l'esprit.

• L'effet de glissement a tendance à mieux fonctionner si les éléments sont positionnés de manière absolue. J'ai ajouté cela à vos styles pour .gallery img.
• Les éléments positionnés de manière optimale fonctionnent mieux lorsqu'ils sont positionnés dans une boîte parent positionnée, sinon ils sont absolus à la page, au lieu d'être positionnés par rapport au parent (fonctionnalité prévue)
• cela a également corrigé le positionnement du bouton droit/img, car sur votre sprite il était positionné 15 pixels à droite du corps du document, pas 15 pixels à droite du bord div.
• J'ai remarqué que vos boutons avaient la mauvaise hauteur et mis à jour cela pour être la hauteur de l'image du sprite. Pour une raison quelconque, ça m'embêtait;).

sur le code ... Vous RÉVISÉ CSS:

.gallery { position: relative; width:700px; height:370px; border-bottom:1px solid #DDD; overflow:hidden; } 
.gallery img { width:700px; height:370px; border:0px; position: absolute;} 

.gallery a.galarr.l { position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) left top no-repeat; position:absolute; top:160px; left:15px; display:block;} 
.gallery a.galarr.r{ position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) right top no-repeat; position:absolute; top:160px; right:15px; display:block;} 

Et votre javascript révisé:

$(document).ready(function() { 
    $('.gallery img').hide(); 
    $('.gallery img:first').show().addClass('galo'); 

    $('.galarr').click(function() { 
     // one event handler to rule them all, both left and right! 
     var $next, slideOutDir = ''; 

     // figure out what direction the images are sliding, and act accordingly. 
     if ($(this).hasClass('l')) { 
      slideOutDir = "right"; 
      // figure out rather the next slide is there, or we need to wrap to the end 
      $next = $('img.galo').prev('img').length ? $('img.galo').prev('img') : $("img:last"); 
     } 
     else { 
      slideOutDir = "left"; 
      // figure out rather the next slide is there, or we need to wrap to the beginning 
      $next = $('img.galo').next('img').length ? $('img.galo').next('img') : $(".gallery img:first"); 
     } 

     if (!$next.length) { 
      $next = $(".gallery img:first"); 
     } 
     //$next.css('z-index', 5); 
     //$('img.galo').css('z-index', 1); 
     $('img.galo').hide('slide', { 
      direction: slideOutDir 
     }).removeClass('galo'); 
     $next.show('slide', { 
      direction: (slideOutDir === "left" ? 'right' : 'left') 
     }).addClass('galo'); 
    }); 

});