Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

            <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!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
    
Thank you very much for your answer. I tried, but doesn't work. I think that the problem is in the script code. For example this is correct: var $filteredData = $data.find('#portfolio-'); ?? –  Phoenix Nov 1 '11 at 22:09
    
See updated answer. It appears that your quicksand script link isn't getting output anywhere? –  Chip Bennett Nov 1 '11 at 22:24
    
See updated answer. The quicksand script is loading now, but it wasn't at the time I updated my answer previously. –  Chip Bennett Nov 2 '11 at 13:41
    
Now I solved the problem but I don't understand why the images vanish. –  Phoenix Nov 3 '11 at 12:47
    
If it appears to be a related problem, update your question; if it is a new or unrelated problem, start a new question, with all relevant details to help others help you solve it. –  Chip Bennett Nov 3 '11 at 12:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.