JQuery Collage изменяет размер изображения при наведении

Question

Я хочу создать группу изображений в формате коллажа (несколько размеров изображения).

После создания все они будут выстроены в линию через изотоп (, например ).

Затем, когда они выстроятся в очередь, при наведении курсора я хочу, чтобы они убрали других с дороги (изменив их размер, чтобы компенсировать большие размеры изображения), и отобразили больше информации.

Прямо сейчас я ОЧЕНЬ близок, но скрипт Isotope позволяет ему изменять размер контейнера, а не изменять размеры изображений.

Итак, я озадачен изменением размеров изображений.

Пример того, что я ищу.

А вот мой JSFiddle из того, что у меня есть.

Спасибо за любую помощь!

Answer 1

Что касается изменения размеров других изображений для размещения основного изображения, я не думаю, что изотоп поддерживает это.Вам, вероятно, придется написать собственную анимацию jquery.

Что-то с логикой: анимируйте по вертикали, найдите все элементы сверху и снизу изображения и сожмите их на то же количество пикселей, что и при увеличении высоты. Затем анимируйте по горизонтали, найдите все элементы слева исправа от изображения и уменьшите их на столько же пикселей, сколько вы увеличиваете ширину.

Единственное, что вы можете сделать, чтобы ограничить изменение размера контейнера, это добавить эту строку в опцию изотопа:

resizesContainer : false

Надеюсь, это поможет

Answer 2

Я ничего не знаю об изотопном сценарии, но если у вас будет только количество изображений, которые вы показываете в скрипте, и это число не изменится, следующее решение будет довольно простым:

1) Расположите все изображения абсолютно.2) Привязать различное событие .hover () к каждому изображению.3) В рамках этого события наведения внесите необходимые изменения в другие изображения.

Это, очевидно, не очень масштабируемое решение, но если количество изображений, которые необходимо изменить, является управляемым и фиксированным, оно будет работатьхорошо.