Question

我正在尝试创建类似于以下website

的内容

基本上我所追求的是使用Isotope来创建一个包含大量缩略图的投资组合页面。用户将鼠标悬停在缩略图上后，将显示字幕叠加（淡入），然后当用户点击缩略图时，将显示该照片的大版本。布局将重新排列。

到目前为止，我已经设法使用几个插件来分别实现效果...换句话说，我使用Mosiac.js来实现悬停效果和Isotope.js来实现布局。到目前为止，您可以在mosaic.html和isotope.html

上查看我的内容但是我被困了。我无法弄清楚如何将这两种解决方案结合起来。我尝试过使用CSS类，并使用jQuery进行了一些调整。我是一个jQuery newb :(

请帮忙！

如果您需要更多信息或问题尚不清楚，请告诉我

Answer 1

不需要将mosaic.js用于简单的事情。首先，让您的网站在功能方面与Isotope合作;不要担心那个阶段的设计微调。然后，只需在Isotope元素中嵌入一些带有覆盖标题的div，并默认隐藏它们。将悬停事件附加到显示隐藏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的解决方案。请接受他的回答

jQuery Isotope和Mosaic Merge解决方案

2 个答案: