Jquery Collage 在悬停时调整图像大小
我正在寻找以拼贴格式创建一组图像（多种图像尺寸）。
创建后，它们将通过同位素排列（像这样）。
然后，一旦它们排列好，悬停时我希望它们将其他图像移开（调整它们的大小以补偿悬停图像的更大尺寸）并显示更多信息。
现在我已经非常接近了，但是同位素脚本允许它调整容器的大小而不是调整图像的大小。
总之，我对调整图像大小感到困惑。
感谢您的所有帮助！
I'm looking to create a group of images in a collage format (multiple image sizes).
Once created, they will all line up via Isotope (like this).
Then, once they have lined up, upon hover I want them to move the others out of the way (resizing them to compensate for the hovered images larger size) and display more information.
Right now I'm EXTREMELY close, but the Isotope script is allowing it to resize the container rather than resize the images.
In summary, I'm stumped on resizing the images.
An example of what I am looking for.
And here is my JSFiddle of what I have so far.
Thanks for any and all help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
至于调整其他图像的大小以适应动画主图像，我认为同位素不支持这一点。您可能需要编写一些自定义 jquery 动画。
有逻辑的东西：
垂直动画，找到图像顶部和底部的所有元素，并在增加高度时将它们缩小相同数量的像素
然后设置水平动画，找到图像左侧和右侧的所有元素，并在增加宽度时将它们缩小相同数量的像素。
要限制容器大小的调整，您可以做的一件事是将这一行添加到您的同位素选项中：
希望这会有所帮助
As far as resizing other images to accommodate for the animating main image, I don't think isotope supports this. You would probably have to write some custom jquery animation.
Something with the logic:
Animate vertical, find all elements to the top and bottom of the image and shrink them the same amount of pixels as you are growing the height
Then animate horizontal, find all element to the left and right of the image and shrink them the same amount of pixels as you are growing the width.
One thing you could do to restrict the resizing of the container is to add this line to your isotope option:
Hope this helps
我对同位素脚本一无所知，但是如果您只需要在小提琴中显示的图像数量，并且这个数字不会变化，那么以下将是一个相当简单的解决方案：
1）定位所有图像绝对地。
2) 为每个图像绑定不同的 .hover() 事件。
3) 在该悬停事件中，对其他图像进行必要的更改。
这显然不是一个可扩展性很强的解决方案，但如果您需要更改的图像数量既可管理又固定，那么它会很好地工作。
I don't know anything about the isotope script, but if you are only going to have the number of images you show in your fiddle, and this number will not vary, the following would be a fairly simple solution:
1) Position all images absolutely.
2) Bind a different .hover() event to each image.
3) Within that hover event, make the necessary changes to the other images.
This is obviously not a very scalable solution, but if the number of images you need to change is both manageable and fixed, it would work fine.