Question

I’m building a simple image gallery with jquery but running into an annoying problem. Since the images are of various sizes I have centered them all to make it look even. However the built in fadeIn/fadeOut methods throw this centering awry and I’m not completely sure what is going on. I tried manually adding the centering class again then manually adding css but cannot get the image to center once it has been turned visible. Thoughts?

css –

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

markup –

<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

Okay well that was surprising. To fix this problem I tried using fadeTo which revealed that the problem was the images once being made visible were given display: inline; so all it took to fix this problem was.

.gallery { text-align: center; }

I thought jQuery was just changing the opacity but it appears to also change the display. Tricky.