Jquery Isotope on two different pages with different target divs

Question

I have two different pages that need to use Isotope for a masonry layout. My current code controls one page...

$(function(){
var $container = $('#photo-container');
$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : '.photo-item',
        masonry: {
  columnWidth: 380,
    isFitWidth: true
}
    });
});

I need to add a second instance of the function for another page where the selectors are "#blog-container" and ".blog-item" (instead of #photo-container/.photo-item)

I don't know how to write all this in one function so i can use isotope on two different pages. Any help appreciated.

Answer 1

Try this is your js file:

$(function(){
var $container = $('#photo-container');
$container.imagesLoaded( function(){
$container.isotope({
    itemSelector : '.photo-item',
    masonry: {
columnWidth: 380,
isFitWidth: true
}
});

var $container2 = $('#blog-container');
$container2.imagesLoaded( function(){
$container2.isotope({
    itemSelector : '.blog-item',
    masonry: {
 columnWidth: 380,
isFitWidth: true
}
  });

  });