WordCamp London 2013
-
Upload
ivdimova -
Category
Technology
-
view
689 -
download
0
Transcript of WordCamp London 2013
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/