Question

我的网站上有一个Isotope实例，在将其转换为使用附加方法后似乎已经破坏了我的其余javascript函数。当我的所有图像最初都在我的index.html上的标记中时，同位素的过滤以及每个图像的灯箱插件都工作得非常漂亮。现在我已按如下方式实现它（使用Desandro的大部分代码用于Isotope：

HTML：

    <div class="main">
        <div id="filters" class="button-group">
            <p>FILTER:</p>
            <button class="selected" data-filter="*">SHOW ALL</button>
            <button class="" data-filter=".photography">PHOTOGRAPHY</button>
            <button class="" data-filter=".film">FILM</button>
            <button class="" data-filter=".design">DESIGN</button>
        </div>
        <div class="isotope">
            <div class="grid-sizer"></div>
        </div>
    </div>

使用Javascript：

$(function() {

var $container = $('.isotope');
$container.isotope({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer"
});

function getItemPhotography(i) {
    var item = '<div class="item photography"><a class = "fluidbox" href =        "img/photography/' + i + 'big.jpg" title = "Click to enlarge"><img src = "img/photography/' + i + '.jpg" class = "image"/></a></div >';
    return item;
}

function getItemDesign(i) {
    var item = '<div class="item design"><a class = "fluidbox" href = "img/design/' + i + 'big.png" title = "Click to enlarge"><img src = "img/design/' + i + '.png" class = "image"/></a></div >';
    return item;
}

var $items = getItems();
// hide by default
$items.hide();
// append to container
$container.append($items);
$items.imagesLoaded().progress(function(imgLoad, image) {
    // image is imagesLoaded class, not <img>
    // <img> is image.img
    var $item = $(image.img).parents('.item');
    $item.show();
    $container.isotope('appended', $item);
});

function getItems() {
    var items = '';
    for (var i = 1; i < 38; i++) {
        items += getItemPhotography(i);
    }
    for (var i = 1; i < 4; i++) {
        items += getItemDesign(i);
    }
    // return jQuery object
    return $(items);
}

});

这部分在加入上述内容后被打破：

//Filtering for isotope
$(function() {
$('#filters').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({
        filter: filterValue
    });
});
$("button").click(function() {
    // Reset them
    $("button").removeClass("selected");
    // Add to the clicked one only
    $(this).addClass("selected");
});
});

//Fluidbox lightbox plugin
$(function() {
    $('.fluidbox').fluidbox();
});

图像附加到Isotope容器并按预期布局。但是，现在Isotope的过滤已中断，Fluidbox灯箱实例也无法正常工作。

非常感谢你的帮助。在过去的几个小时里，我一直在努力解决这个问题，并开始认为它可能像我的函数初始化或某个分号那样简单。

Answer 1

解决。缺少同位素过滤器函数中$ container的参考。

Isotope附加了破坏剩余的jQuery

1 个答案: