Изотоп приложил сломанный остаток jQuery

Question

У меня есть экземпляр Isotope на моем веб-сайте, который, кажется, сломал остальную часть моих функций javascript после преобразования его, чтобы использовать добавленный метод. Когда у меня были все мои изображения изначально в разметке на моем index.html, как фильтрация изотопа, так и плагин lightbox, который я имел для каждого изображения, работали красиво. Теперь я реализовал это следующим образом (с использованием наиболее кода Desandro для изотопом:

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(); 
}); 

Изображения прилагаются к контейнеру изотопов и выложены как ожидается. Howeve r, теперь фильтрация прерывается для Isotope, и экземпляр Lightbox Fluidbox также не работает.

Большое спасибо за любую помощь. Я боролся с этим в течение последних нескольких часов, и я начинаю думать, что это может быть так просто, как инициализация моей функции или точка с запятой.

Answer 1

Решено. Отсутствует ссылка для $ container в функции для изотопных фильтров.