Как при смене src изображения плавно поменять и размер блока в котором она находится?

Question

[Александр]

Как при смене src картинки плавно поменять и размер блока в котором она находится?
Изображения Разные по размеру, размер блока основывается на основе размера изображения.
HTML

<div class="fotobox">
    <div id="foto" class="foto">
        <img class="imgfoto" src="/upload/photo/1.jpg" >
    </div>
</div>

CSS

.fotobox{
    margin: 3px auto;
    position: relative;
    top: 0px; left: 0; bottom: 0; right: 0;
    border: 1px solid #888;
    width: 50%;
    min-width: 240px;
    max-width: 350px;
    overflow: hidden;
}
.imgfoto{
    width: 100%;
    max-height: 500px;
    transform: rotate(0deg);
    transition: all 1s ease-in 0s;
}

При нажатии на кнопку при помощи js меняется src .imgfoto.
При этом размер фото разный
И если ширина остаётся неизменной. то вот высота меняется в зависимости от ориентации изображения.
Это происходит резко и некрасиво.
Также при вращении фото transform: rotate(90deg) размер fotobox остаётся неизменным а части изображения скрываются.

Answer 1

[Виталий Киренков]

А вы пробовали гуглить что-то на подобии jquery gallery, javascript галлереи и т.п.? Если вы хотите, чтобы это сделали за вас, то вы ошиблись адресом чутка...

Comments

[Александр]

Не надо за меня нечего делать. Галерей смотрел много и разные тот же лайт бокс меняет див на основе размера изображения и при этом плавно. Вопрос именно в том как это реализовано.

[Виталий Киренков]

@s2nner может стоит открыть исходник и попытаться понять, что там происходит? Благо лайтбокс предоставляет и минимизированную версию и полную...

[Александр]

Как работает lightbox я знаю, и поэтому специально не ставил тег js .
Мой случай отличается так как изображения которые необходимо показать не присутствуют на странице и следовательно в DOM. Это объект/массив с набором ссылок получаемые через Ajax. Но это принципиально не имеет отношения к вопросу.

[Виталий Киренков]

@s2nner
Если очень грубо, то:
$(".blockWithImage").animate({"height": $(img).height()});

Answer 2

[Александр]

При смене изображения вызываю

$('.fotobox').css({"height": $('.imgfoto').height()});

в CSS

.fotobox{
    transition: all 0.5s ease-in 0s;
}

CSS3 анимация срабатывает.
можно конечно использовать и метод .animate()
но CSS3 приятнее как то.
К сожалению походу не как всё же без js не обойтись. я это про $('.fotobox').css({"height": $('.imgfoto').height()});