3 Useful jQuery Libraries

Who am I?

Chosen

Example

$(function () { $('.chosen-select').chosen({ allow_single_deselect: true, placeholder_text_multiple: "Choose a

category..." });});

WordPress

<div id="cats" >

<?php $cats = get_terms('product_cat');?>

<form>

<select style="width:350px;" multiple class="chosen-select">

<?php foreach ($cats as $cat) {?>

<option><?php echo $cat->name;?></option>

<?php } ?>

</select>

</form>

</div>

Showcase

http://harvesthq.github.io/chosen/options.html

Masonry

var $container = $('ul.products');// initialize$container.masonry({ columnWidth: 60, itemSelector: 'li.product', "gutter": 10, "isFitWidth": true

});$container.on( 'click', 'li.product',

function() { $( this ).toggleClass('is-expanded');

$container.masonry(); });

Example

Showcase

http://masonry.desandro.com/options.html

FlexSlider

jQuery('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails", slideshow: false });

Example

WordPress<?php

$attachments = get_posts( array( 'post_type' => 'attachment', 'post_parent' =>$post->ID));

if ( $attachments ) {

echo '<div class="flexslider"> <ul class="slides">';

foreach ( $attachments as $attachment ) {

$thumb_src = wp_get_attachment_image_src( $attachment->ID, 'slider-thumb' );

echo '<li data-thumb="'. $thumb_src[0] .'">' . wp_get_attachment_image( $attachment->ID, 'slider' ) .

'</li>';

}

echo '</ul> </div>';

} ?>

http://www.woothemes.com/flexslider/