Question

我希望使用isotope.js和类似灯箱的叠加层来创建一个很酷的，可过滤的照片库或信息页面，您可以在其中点击一个项目以获得包含更多信息的弹出窗口。

这是一个示例的jfiddle http://jsfiddle.net/9d5qw/

这是我正在使用的js -

$('.box-to-display').click(function() {
    $(this).siblings('.popup').center();
    $(this).siblings('.popup').fadeIn();
    $(this).siblings('.overlay').fadeIn();
});

$('.overlay').click(function() {
    $(this).siblings('.popup').fadeOut();
    $(this).fadeOut();
});


var $container = $('#isotope-container');
      $container.isotope({
        animationEngine : 'jquery',
         layoutMode: 'straightDown',
        animationOptions: {
            duration: 250,
            easing: 'linear',
            queue: false
        } });

基本上 - 同位素放溢：隐藏;在它所针对的容器上，隐藏定位的弹出覆盖图。理想情况下，我不想做两个单独的部分 - 一个用于叠加，一个用于列表。我正在使用php从数组生成我的列表，以防这一点很重要！

写完所有这些之后，我意识到我可能需要有两个独立的代码 - 一个用于覆盖，一个用于列表，并用唯一的ID连接它们 - 但如果没有，请告诉我！

谢谢！雅各布

Answer 1

我通过使用两个独立的代码解决了这个问题，一个用于覆盖，一个用于列表。

希望这有助于某人！

同位素和灯箱 - 就像叠加：怎么做？

1 个答案: