jQuery同位素和镶嵌合并解决方案

Question

我正在尝试创建类似以下website的内容

本质上，我所追求的是使用Isotope，以便创建一个有许多缩略图的投资组合页面。一旦用户将鼠标悬停在缩略图上，就会出现一个标题覆盖图(淡入)，然后当用户单击缩略图时，该照片的大图就会出现。布局将会重新排列。

到目前为止，我已经设法使用了几个插件来实现单独的效果……换句话说，我使用Mosiac.js来实现悬停效果，使用Isotope.js来实现布局。您可以看到我到目前为止在mosaic.html和isotope.html上的内容

但是我被卡住了。我想不出如何将这两个解决方案结合起来。我尝试过使用CSS类，并对jQuery进行了一些修改。我是一个jQuery新手:(

请帮帮我！

如果您需要更多信息或问题不清楚，请让我知道

Answer 1

对于这样简单的事情，不需要使用mosaic.js。首先，让你的网站在功能上使用Isotope；不要担心在那个阶段的设计微调。然后，只需在Isotope元素中嵌套一些带有覆盖标题的div(s)，并在默认情况下隐藏它们。将悬停事件附加到显示隐藏div的Isotope元素，并在查看器将鼠标悬停在Isotope元素上时显示它们。

但请记住，使用移动触摸屏设备的人不会看到您的悬停效果...

HTML

<div class="item">
    // content of the Isotope .item
    <div class="overlay">
        // content of the overlay
    </div>
</div>

CSS

.overlay {
    display: none;
    /* other rules to style the overlay */
}

jQuery

$(".overlay").hover(function(){
    $(this).filter(':not(:animated)').animate({ whatever you like to animate });
        }, function() {
    $(this).animate({ whatever you like to animate });
});

另请参阅the jQuery fadeToggle()和the jQuery animate()方法以及show()、hide()等方法，了解您可能希望在悬停时实现的效果。

Answer 2

我有完全相同的，但我不明白为什么我不能组合它们。马赛克需要一个高度，而同位素具有这种动态性。所以我使用：

$('.mosaic-block').each(function (index) {
    $(this).height($(this).find(".mosaic-backdrop").height());
});

但是Isotope仍然有项目放在它上面，标题仍然不起作用。但是，如果你想坚持使用马赛克，这可能会给你指明正确的方向。我将把我的代码转换成@Systembolagnet的解决方案。请接受他的回答