Jquery Collage调整悬停图像的大小

Question

我希望创建一组图像在拼贴格式(多种图像大小)。

一旦创建，它们都将通过同位素(like this)排成一行。

然后，一旦它们排好队，在悬停时，我希望它们将其他图像移到一边(调整它们的大小以补偿悬停的图像变大)，并显示更多的信息。

现在我已经非常接近了，但是Isotope脚本允许它调整容器的大小，而不是调整图像的大小。

总而言之，我在调整图像大小上遇到了困难。

An example of what I am looking for.

And here is my JSFiddle of what I have so far.

感谢大家的帮助！

Answer 1

至于调整其他图像的大小以适应动画主图像，我不认为同位素支持这一点。您可能必须编写一些自定义的jquery动画。

与逻辑有关:垂直动画，找到图像顶部和底部的所有元素，并将它们缩小为与您增长高度相同的像素量，然后水平动画，找到图像左侧和右侧的所有元素，并将它们缩小为与您增长宽度相同的像素量。

限制容器大小的一件事是将这一行添加到您的同位素选项中：

resizesContainer : false

希望这能有所帮助

Answer 2

我对同位素脚本一无所知，但如果你只想在你的小提琴中显示图像的数量，并且这个数字不会改变，下面的方法将是一个相当简单的解决方案：

1)绝对定位所有图像。2)给每个镜像绑定不同的.hover()事件。3)在该悬停事件中，对其他图像进行必要的更改。

这显然不是一个可伸缩的解决方案，但如果您需要更改的图像数量既可管理又固定，它将工作得很好。