How I got jQuery Quicksand working with WordPress?

2 Views

I have been tryin to make this plugin work but I failed badly. I have the code like below:

The portfolio-terms is filtering buttons:

Read More
            <div id="portfolio-terms">
                <ul>
                    <li><a href="#" class="all current"><?php _e('All', 'framework'); ?></a><span>/</span></li>
                    <?php 
                    wp_list_categories(array(
                            'title_li' => '', 
                            'taxonomy' => 
                            'skill-type', 
                            'walker' => new Portfolio_Walker(),
                            'show_option_none' => ''
                        )
                    ); ?>
                </ul>
            </div>

The portfolio-items is the images that need to be filtered: 

       <ul id="portfolio-items" class="<?php if($magic_door) : ?>enabled<?php endif; ?> clearfix">

               <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <li id="portfolio-<?php the_ID(); ?>" class="<?php echo $output; ?>visible">

                        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

                            <a class="entry-link" href="<?php the_permalink(); ?>"></a>

                            <?php tz_featured_image(get_the_ID(), TRUE); ?>

                        </div>

                    </li>

               <?php endwhile; endif; ?>

        </ul>

I was using this jQuery code:

<script src="<?php bloginfo('template_directory'); ?>js/jquery.quicksand.js"></script>
  <script src="<?php bloginfo('template_directory'); ?>js/jquery.easing.js"></script>
  <script>

    jQuery.noConflict();
jQuery(document).ready(function($){
    // Clone applications to get a second collection
    var $data = $("#portfolio-items").clone();

    //NOTE: Only filter on the main portfolio page, not on the subcategory pages
    $('#portfolio-terms ul li').click(function(e) {
        $("ul li").removeClass("active");   
        // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
        var filterClass=$(this).attr('class').split(' ').slice(-1)[0];

        if (filterClass == '.all current') {
            var $filteredData = $data.find('#portfolio-');
        } else {
            var $filteredData = $data.find('#portfolio-[data-type=' + filterClass + ']');
        }
        $("#portfolio-items").quicksand($filteredData, {
            duration: 800,
            easing: 'swing',
        });     
        $(this).addClass("active");             
        return false;
    });
});

  </script>

But does not work.
here my theme test: http://stakk.it/

Can someone help me?
Thank you!

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Not sure it is entirely your problem, but you have a syntax error here:

    <script src="<?php bloginfo('template_directory'); ?>js/jquery.easing.js"></script>

    …you need to add the trailing slash to bloginfo('template_directory'), like so:

    <script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.js"></script>

    EDIT

    Looking at your browser source, your loop markup is working properly, but your quicksand script link doesn’t appear to be output anywhere. Where and how are you calling it?

    EDIT 2

    Okay, the quicksand script is loading now; however, it appears to be using a jQuery no-conflict mode format that will cause it to execute immediately, rather than on document.ready. You might try changing this format:

    (function($) {
    // quicksand script
})(jQuery);

    …to this:

    jQuery(document).ready(function($) {
    // quicksand script
});

    Also: you’re loading a TON of scripts. I would make sure that you have them cascaded properly, so that dependent scripts load after their dependencies.

    Note: using wp_enqueue_script(), which includes a $deps argument, is especially helpful here, and is the best-practice implementation for enqueueing scripts.