[Plugin: Isotope Bootstrap] Javascript problem – WordPress Bootstrap Isotope

Hello everybody. I’m trying to make my first WordPress template. I want implement isotope into my WordPress+Bootstrap base. The fact is even if I have some logic, I don’t know jQuery so I’m wasting a lot of time an a little problem (I think). Here it is :

I have a template-portfolio page which displays the custom post type “project” posts. I also have a custom taxonomy “type” linked to the project that shows the type of project.
Isotope generates the list, searching the different types of projects.

In the main container #elements the projects are generated by isotope, each element is in a .span3 column contained in a .row-fluid.

Everything worked fine until I wanted to add a 90px padding to the .row-fluid ; Since this moment, I had only 2 elements per row…

So I tried to find a solution and found it on a note about fluid / responsive layouts in Isotope plugin site. It talks about a “smart-resize” solution that I tested… but with some javascript errors. (I had to rewrite part of the code because of the $ -to-> jQuery() thing).

Nevertheless, this solution worked, the visual part was ok, but the isotope generated list didn’t anymore…

That’s why I need your help ! Something in my rewritten code musn’t work, and that’s probably because I don’t really know javascript/jQuery.

Here is a part of the the template-portfolio file : Isotope generated menu :

<?php
        //list terms in a given taxonomy
        $taxonomy = 'type';
        $tax_terms = get_terms($taxonomy);
        ?>

          <ul id="options">
            <li><a href="#" data-filter="*" class="current">show all</a></li>
                <?php
                foreach ($tax_terms as $tax_term) {
                echo '<li>' . '<a href="#" data-filter=".' . $tax_term->slug.'" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a></li>';
                }
                ?>
          </ul>

The portfolio part :

<div class="row-fluid">
  <div class="span12 content">
    <div class="row-fluid">

      <div id="elements">
        <?php wp_reset_postdata(); ?>
        <?php query_posts('posts_per_page=-1&post_type=projet'); ?>
        <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
          <?php $terms = get_the_terms( $post->ID, 'type' ); ?>

          <div class="projet span3<?php foreach( $terms as $term ) echo ' ' . $term->slug; ?>">
            <div class="view view-first">
              <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail('portfolio-thumbnail'); ?>
              <div class="mask">

                  <h3 class="projet-name"><?php the_title(); ?></h3>

                <p class="projet-description"><?php the_excerpt(); ?></p>
                <?php echo get_the_term_list( $post->ID, 'type', '<p>Type de projet : ', ', ', '</p>' ) ?>
              </div><!-- /.mask -->
              </a>

            </div>                   

          </div>
          <?php endwhile; ?>
        <?php endif; ?>
      </div>
</div>
</div>
</div><!-- /.row -->

Here is the original script I put in it (from Damien Saunders) :

<script type="text/javascript">
  jQuery(document).ready(function(){
    var mycontainer = jQuery('#elements');
    mycontainer.isotope({
    itemSelector: '.span3'
    });

  // filter items when filter link is clicked
  jQuery('#options a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    mycontainer.isotope({ filter: selector });
    return false;
    });

  });
</script>

The isotope type generation list works, but the the visual presentation is broken.

And here is the one I re-wrote, combining Damien Saunder’s and David DeSandro’s :

<!-- Script isotope -->
<script type="text/javascript">

  jQuery(document).ready(function(){
    var mycontainer = jQuery('#elements');
    mycontainer.isotope({
    itemSelector: '.span3',
    resizable:false,
    masonry: { columnWidth: mycontainer.width() / 5 }
    });

    // filter items when filter link is clicked
    jQuery('#options a').click(function(){
      var selector = jQuery(this).attr('data-filter');
      mycontainer.isotope({ filter: selector });
      return false;
    });

      jQuery(window).smartresize(function(){
      mycontainer.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: mycontainer.width() / 5 }
      });
    });.smartresize();
  });
</script>

Do you see something wrong in this code ?