• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WordCamp London 2013
 

WordCamp London 2013

on

  • 764 views

 

Statistics

Views

Total Views
764
Views on SlideShare
761
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

https://twitter.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WordCamp London 2013 WordCamp London 2013 Presentation Transcript

    • 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
    • Example 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(); });
    • Showcase
    • http://masonry.desandro.com/options.html
    • FlexSlider
    • Example jQuery('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails", slideshow: false });
    • 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/