Разверните и наложите изображение на сетку других изображений

Question

Я боролся с jQuery всю ночь и очень расстроился, так что извините, если ответ пялился мне в лицо.

У меня есть сетка 5x3 из 15 изображений, содержащихся в <div>, и когда я нажимаю на одно из них, я хочу, чтобы оно увеличилось в три раза по сравнению с исходным размером 150x105 и перекрыло остальные. У меня есть расширение вниз, но перекрытие не совсем работает.

Мой текущий HTML:

    <div id="image-grid">
        <img src="images/after-pictures/1.jpg" class="igc1" />
        <img src="images/after-pictures/2.jpg" class="igc2" />
        <img src="images/after-pictures/3.jpg" class="igc3" />
        <img src="images/after-pictures/4.jpg" class="igc4" />
        <img src="images/after-pictures/5.jpg" class="igc5" />
        <img src="images/after-pictures/6.jpg" class="igc1" />
        <img src="images/after-pictures/7.jpg" class="igc2" />
        <img src="images/after-pictures/8.jpg" class="igc3" />
        <img src="images/after-pictures/9.jpg" class="igc4" />
        <img src="images/after-pictures/10.jpg" class="igc5" />
        <img src="images/after-pictures/11.jpg" class="igc1" />
        <img src="images/after-pictures/12.jpg" class="igc2" />
        <img src="images/after-pictures/13.jpg" class="igc3" />
        <img src="images/after-pictures/14.jpg" class="igc4" />
        <img src="images/after-pictures/15.jpg" class="igc5" />
    </div>

Класс igc* обозначает столбец, в котором находится изображение.

CSS:

#image-grid {
    border: 1px solid #aaa;
    width: 745px;
    padding: 5px 2px 2px 5px;
}

#image-grid img {
    width: 150px;
    height: 105px;
    margin: -2px;
}

JQuery:

$('#image-grid img').click(function() {
    $(this).animate({
        width: '450px',
        height: '315px',
        zIndex: '10'
    }, 200);
});

Answer 1

примерно так ...

$('#image-grid img').click(function () {
    $(this).animate({
        width: '450px',
        height: '315px'
    }, 200)
    .css({
        'z-index': function (i, z) {
            return z + 10;
        }, position: 'absolute',
        left: 0,
        top: 0
    })
    .siblings().css({
        'z-index': function (i, z) {
            return z - 10;
        }, position: 'static',
        width: '150px',
        height: '105px',
        left: 'auto',
        top: 'auto'
    });
});​

дайте мне знать, каков эффект ..

Answer 2

Возможно, вы пытаетесь применить z-index к элементам, которым также не присвоено абсолютное свойство position?