Using jQuery Isotope

Community Forums Forums Design Tips and Tricks Using jQuery Isotope

This topic is: not resolved

Tagged: ,

This topic contains 10 replies, has 8 voices, and was last updated by  SoZo 1 year, 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #147

    SoZo
    Moderator
    Post count: 1573

    1. Download the isotope package then upload the jquery.isotope.min.js to a folder titled “lib” in the child theme’s directory.

    2. Create a file and name it isotope-parameters.js and place the following into it.
    $(document).ready(function () {
    //Set your isotope area
    var $container = $('#container'),
    filters = {};
    //Set our items to be filtered, .post will work if you're using the post_class(); function
    $container.isotope({
    itemSelector : '.post'
    });
    // filter items when filter link is clicked
    $('#filters a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
    })
    });

    3. Upload that file to the child theme’s lib folder

    4. Add this into the child theme’s functions.php. Note I had to deregister WP’s jquery and reload from google for some reason that I never worked out.
    // Load scripts
    add_action( ' wp_enqueue_scripts', 'child_load_scripts' );
    function child_load_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true );
    wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true );
    }

    5. Create a page template and add this for the filter selector editing the “XXX” with the ID of the category whose children you want as filters
    <ul id="filters" data-filter-group="color">
    <li class="filter">Filter:</li>
    <li><a href="#filter-topic-any" data-filter="" class="selected">All</a></li>
    <?php
    //Grab the child categories
    $categories = get_categories( 'child_of=XXX' );
    foreach ( $categories as $category ) {
    //and format them for use as isotope filters
    echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
    }
    ?>
    </ul>

    6. Add your loop below that. The only important point here is to put the posts into a “<?php post_class(); ?>” div. For example something like
    <?php $recent = new WP_Query( 'category_name=REPLACE_WITH_PARENT_CAT_NAME&posts_per_page=999&orderby=rand' );
    while ( $recent->have_posts() ) : $recent->the_post(); ?>
    <div <?php post_class(); ?>>
    POST CONTENT STUFF
    </div><!-- end .post-class -->
    <?php endwhile;
    wp_reset_query(); ?>

    7. Add the isotope style rules to your style sheet along with any other rules you want
    /**** Isotope Filtering ****/
    .isotope-item {
    z-index: 2;
    }
    .isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    }
    /**** Isotope CSS3 transitions ****/
    .isotope,
    .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }
    .isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
    }
    .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: top, left, opacity;
    transition-property: transform, opacity;
    }
    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
    }

    Hope that helps you get Isotope running in your project!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo. Reason: Playing with forum tags
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo.
    • This topic was modified 1 year, 8 months ago by  SoZo. Reason: Playing with forum tags
    #181

    SoZo
    Moderator
    Post count: 1573

    Nice new avatar! Stay safe out there!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #168

    Jon Weiss
    Moderator
    Post count: 14

    Great tip, John! It’s definitely one I’ll add to my bookmarks :)


    #182

    Jen Baumann
    Keymaster
    Post count: 325

    Nice Tip. Thanks, John!


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #201

    Marco
    Participant
    Post count: 63

    Great tip! If I may add a slight modification (we all want a faster page loading, don’t we? )

    // Loading Isotope only on the Page Template
    function my_isotope()
    {
    if (is_page_template( 'my_page_template.php' )  && !is_admin() ) {
    wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true ); // Enqueue it!
    wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true ); // Enqueue it!
    }
    }
    add_action('wp_head', 'my_isotope');


    • This reply was modified 1 year, 8 months ago by  Marco. Reason: bad formatting
    • This reply was modified 1 year, 8 months ago by  Marco. Reason: bad formatting
    #224

    jasonhobbsllc
    Participant

    WOW!! Absolutely awesome!

    #227

    SoZo
    Moderator
    Post count: 1573

    Good point Marco!


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #228

    Posh John
    Participant
    Post count: 42

    Nice tutorial, thanks!


    Thus the heavens and the earth were completed in all their vast array. Genesis 2

    #243

    3200 Creative
    Participant
    Post count: 23

    We’ve found this link to come in extremely handy for all that is isotope!:)

    isotope.metafizzy.co/

     


    3200 Creative – Genesis design and development specialists | 3200 Goodies – Design and development blog

    #257

    wpsmith
    Moderator
    Post count: 178

    First and foremost, script loading should be done via wp_enqueue_scripts hook, not get_header.

    Also, unless you want (err, have) to have Google CDN jQuery, there is no need to deregister jquery. So feel free to delete these lines:

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );

    Often times, this method (switching to Google jQuery or otherwise) will break plugins (mainly because the Google CDN failed for this reason or that OR the person doesn’t update the version of jQuery like WordPress does for you). If I use Google CDN jQuery, here is my prefer method (gist):

    So, here’s what I would recommend as for the script loading (assuming the previous function exists in your child theme):

    https://gist.github.com/4504030


    Travis Smith | Recommended StudioPress Developer & Contributor
    WP Smith | @wp_smith | GitHub

    Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
    How to use Firebug for Designers by SixRevisions

    • This reply was modified 1 year, 8 months ago by  wpsmith.
    • This reply was modified 1 year, 8 months ago by  wpsmith.
    • This reply was modified 1 year, 8 months ago by  wpsmith.
    • This reply was modified 1 year, 8 months ago by  wpsmith.
    • This reply was modified 1 year, 8 months ago by  wpsmith.
    • This reply was modified 1 year, 8 months ago by  wpsmith.
    #289

    SoZo
    Moderator
    Post count: 1573

    Great function Travis. Thanks for posting.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.