jQuery Isotope 和 Mosaic 合并解决方案答案

【问题标题】：jQuery Isotope and Mosaic Merge SolutionjQuery Isotope 和 Mosaic 合并解决方案
【发布时间】：2012-12-04 18:58:01
【问题描述】：

我正在尝试创建类似于 website

的内容

基本上我所追求的是使用 Isotope 来创建一个包含大量缩略图的投资组合页面。一旦用户将鼠标悬停在缩略图上，就会出现一个标题覆盖（淡入），然后当用户单击缩略图时，将出现照片的大版本。布局将重新排列。

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

但我被困住了。我不知道如何结合这两种解决方案。我尝试过使用 CSS 类并稍微使用 jQuery。我是 jQuery 新手 :(

请帮忙！

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

【问题讨论】：

标签： jquery mosaic

【解决方案1】：

不需要使用mosaic.js 来做这样简单的事情。首先，让您的网站在功能方面使用 Isotope；不用担心那个阶段的设计微调。然后，只需在 Isotope 元素中嵌套一些带有覆盖标题的 div，并默认隐藏它们。将悬停事件附加到 Isotope 元素，显示隐藏的 div，并在查看者的鼠标悬停在 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() 等方法，了解您可能希望在悬停时实现的效果。

【讨论】：

我让它按照我想要的方式工作，但仍有一件小事需要您的帮助...请参阅 [link](jquery.ramiyahya.com) 如果您注意到，请点击点击显示大图，黑色覆盖从所有照片中消失。我想让它只在大图像上消失。我相信这与 $(this) 选择器有关……不知道该怎么做。
你几乎可以在“$overlay.removeClass();”的末尾删除这行代码但是，因为您在每个元素的事件处理程序之外定义了鼠标悬停/悬停行为，所以用鼠标退出放大的图像仍然会使该大图像变黑。我会将 hover() 逻辑放在条件中，因此您可以定义：只有小/预览图像在悬停时删除了 .overlay；大图像切换了 .overlay 类并删除了 hover() 效果，因此将鼠标移出大图像不会“变黑”它。
感谢您回复我...如果您能帮助编写您建议的代码，我将不胜感激...我无法理解逻辑。

【解决方案2】：

我有完全相同的，无法弄清楚为什么我不能将它们结合起来。马赛克需要高度，而同位素具有这种动态。所以我使用：

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

但是 Isotope 上仍然放置了一些项目，并且标题仍然不起作用。但是，如果您想坚持使用 Mosaic，这可能会为您指明正确的方向。我要将我的代码转换为@Systembolagnet 的解决方案。请接受他的回答

【讨论】：