Centre fadeIn image

Question

Je construis une simple galerie d'images avec jquery mais je rencontre un problème ennuyeux. Puisque les images sont de différentes tailles, je les ai toutes centrées pour qu'elles soient uniformes. Cependant, les méthodes intégrées dans fadeIn/fadeOut jettent ce centrage de travers et je ne suis pas complètement sûr de ce qui se passe. J'ai essayé d'ajouter manuellement la classe de centrage puis d'ajouter manuellement css mais je n'arrive pas à centrer l'image une fois qu'elle a été rendue visible. Pensées?

css -

.center { margin: 0 auto; } 
img.invisible { display: none; } 
img.visible { margin: 0 auto; display: block;} 

balisage -

<div id="content" class="center gallery"> 

    <img src="images/event/event_1.jpg" alt="alt-text" class="visible" /> 
    <img src="images/event/event_2.jpg" alt="alt-text" class="invisible" /> 
    <img src="images/event/event_3.jpg" alt="alt-text" class="invisible" /> 

    <div id="selection" class="overlay"> 
     <div class="select first"> 
      <a href="#" rel="1"><img src="images/event/event_1_small.jpg" /></a> 
     </div> 
     <div class="select"> 
      <a href="#" rel="2"><img src="images/event/event_2_small.jpg" /></a> 
     </div> 
     <div class="select"> 
      <a href="#" rel="3"><img src="images/event/event_3_small.jpg" /></a> 
     </div> 
    </div> 

jQuery -

function updateImage(img_num) { 
    var cur_img = $("#content img.visible"); 
    var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]'); 

    cur_img.fadeOut('600',function() { 
     next_img.fadeIn('600'); 
     next_img.removeClass("invisible").addClass("visible"); 
     cur_img.removeClass("visible").addClass("invisible"); 
    }); 
} 

Answer 1

D'accord, c'était surprenant. Pour résoudre ce problème, j'ai essayé d'utiliser fadeTo qui a révélé que le problème était les images une fois rendues visibles ont été donnés display: inline; alors tout ce qu'il fallait pour résoudre ce problème était. Je pensais que jQuery ne faisait que changer l'opacité, mais il semble également changer l'affichage. Rusé.

Answer 2

Vous ajoutez margin: 0 auto; seulement à la classe .visible, vous devez l'appliquer à tous vos images:

.gallery img{margin:0 auto;display:none} 
.gallery img.visible{display:block}