FlexSlider 从这里开始

Step 1 – Link files

Add these items to theof your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

 Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
      <img src="slide1.jpg" />
      <img src="slide2.jpg" />
      <img src="slide3.jpg" />

 Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {

…and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 – Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade",              //String: Select your animation type, "fade" or "slide"
easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false,                 //{NEW} Boolean: Reverse the animation direction
animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false,               //Boolean: Randomize slide order

// Usability features
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item

// Secondary Navigation
keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item

// Special properties
controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed


让 jQuery Datepicker 兼容 WordPress 和 WPML


        $.datepicker.regional['zh-hans'] = $.datepicker.regional['zh_CN'] = {
                closeText: '关闭',
                prevText: '&#x3c;上月',
                nextText: '下月&#x3e;',
                currentText: '今天',
                monthNames: ['一月','二月','三月','四月','五月','六月',
                monthNamesShort: ['一','二','三','四','五','六',
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
                dayNamesMin: ['日','一','二','三','四','五','六'],
                weekHeader: '周',
                dateFormat: 'yy-mm-dd',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'};
        $.datepicker.setDefaults( $.datepicker.regional[ "<?php echo defined('ICL_LANGUAGE_CODE')?ICL_LANGUAGE_CODE:WPLANG;?>" ] );

最后一行,这儿由于 WPML 和 WORDPRESS 的语言静态变量不一样,值也不同,需要判断然后输出,输出的值可能是 zh-hans,或 zh_CN,所以在第一行声明了两个变量来存储翻译。



caroufredsel 的配置页面里提到 swipe 这个属性:To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.

如果 HTML 结构是这样

<div class="image_carousel">
<ul id="carousel">
   <li><img src="slier.jpg"/><li>
   <li><img src="slider2.jpg"/><li>


        auto        : false,
	prev        : '#c-prev',
	next        : '#c-next',
        swipe       : {
                onTouch     : true,
                onMouse     : true


<ul id="carousel">
   <li><a href="foo.html"><img src="kitten.jpg"/></a><li>
   <li><a href="foo.html"><img src="puppy.jpg"/></a><li>


这是因为 这个插件将一些元素排除了,查看代码可以发现:

excludedElements:"label, button, input, select, textarea, a, .noSwipe"

所以在处理带连接的情况,就需要重置一下 excludedElements, 例如:

    	auto : false,
        items: 1,
        swipe       : {
            onTouch         : true,
            onMouse         : true,
            options         : {
                excludedElements: "button, input, select, textarea, .noSwipe"
	    prev : "#foo1_prev",
	    next : "#foo1_next"

可以在手机里打开下面的链接查看 http://jsfiddle.net/4uUKd/28/embedded/result,js,css,html/

还有另一个另一个jquery 插件,jQuery Touchwipe Plugin



        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true

        wipeLeft: function() {
            $('#carousel').trigger('next', 1);
        wipeRight: function() {
            $('#carousel').trigger('prev', 1);

这样就可以了,但是至于 touchSwipe 如何支持链接,一时还找不到方法。

Backstretch Errot: has no method ‘backstretch’

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method ‘backstretch’

maybe many guys got this error

Maybe the issue is ’cause you put $.backstretch([“bg.jpg”]);   ahead of jquery.backstretch.js plugin, try switch the postion.

jQuery 向上弹出式菜单

Slide Up Menu / jQuery 向上弹出式菜单

The jQuery Slide Up Menu it’s a good alternative to other existing menus giving the possibility to position the menu on the bottom of your header image or at the bottom of the window, acting like Windows Start Menu. You can let it behave like a normal menu or you can add HTML code inside and put whatever you want inthere

jQuery的向上滑动菜单,这是一个很好的替代现有的可能定位在你的头部图像的下面或在窗口底部的菜单上,就像Windows的“开始”菜单的菜单。 你可以把它像一个普通的菜单, 或者你可以添加HTML代码或者任何你想要的放里面。

Options / 设置

slideUpSpeed / 上弹速度

Number of milliseconds to slide up the submenu items Default: 500

slideDownSpeed / 回收速度

Number of milliseconds to slide down the submenu items Default: 500


Ease animation effect Default: easeInOutCubic (supported without jquery.ease plugin)

Use false to remove the animation ease.
To use any other animation pls use the jQuery Easing Plugin

stopQueue / 停止动画队列

Stop or continue animation on event change Default: true 

Stopping the queue animation will provide a faster visual feedback when sliding trough the menu items although the effects may appear snappier. Using stopQueue false you may get animations executing long after you hovered the item (if the user will rapidly and repeatedly hover the mouse over the menu items).

Usage / 怎么使用

HTML HEAD code / Html 头部调用的代码

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script> //if needed
<script type="text/javascript" src="jquery.slideup.menu.1.0.min.js"></script>

HTML BODY code / html 菜单的代码

<div class="top-menu">
<ul class="top-menu-main">
  <li class="first">
    <ul class="top-submenu">
      <li class="first">Subitem 1.0</li>
      <li class="">Subitem 1.1</li>
      <li class="">Subitem 1.2</li>
      <li class="">Subitem 1.3</li>
      <li class="last">Subitem 1.4</li>
    <a href="#" class="menu-item-text">Item 1</a>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 2.0</li>
      <li class="">Subitem 2.1</li>
      <li class="last">Subitem 2.2</li>
    <a href="#" class="menu-item-text">Item 2</a>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 3.0</li>
      <li class="last">Subitem 3.1</li>
    <a href="#" class="menu-item-text">Item 3</a>

Javascript code / 执行代码

var opts = {slideUpSpeed:500, slideDownSpeed: 200};


WordPress Portfolio work with Isotope and Infinite Scroll


  1. Isotope: 神奇的布局精致的jQuery插件。演示
  2. Infinite Scroll:无限滚动被称为autopagerize的,unpaginate,无尽的网页。但实质上,它是预取从随后出现的页面上的内容,并直接将其添加到用户的当前页面。http://www.infinite-scroll.com/ 演示

新建文章类型 portfolio 和 Portfolio 分类 

 function my_post_types() {
        register_post_type('portfolio', array(
            'label' => __('Portfolio','itc'),
            'singular_label' => __('Portfolio', 'itc'),
            '_builtin' => false,
            //'exclude_from_search' => false, // Exclude from Search Results
            'capability_type' => 'post',
            'public' => true,
            'show_ui' => true,
            'show_in_nav_menus' => FALSE,
            'menu_position' => 100,
            'rewrite' => array(
                'slug' => 'portfolio-show',
                'with_front' => FALSE,
            'query_var' => true,
            'supports' => array(

        register_taxonomy('portfolio_category', array('portfolio', 'solution', 'service'), array(
            'hierarchical' => true,
            'labels' => array(
                'name' => __('Portfolio Category', 'itc'),
                'singular_name' => __('Portfolio Category', 'itc'),
                'search_items' => __('Search Portfolio Category', 'itc'),
                'all_items' => __('All Portfolio Category', 'itc'),
                'parent_item' => __('Parent Portfolio Category', 'itc'),
                'parent_item_colon' => __('Parent Portfolio Category:', 'itc'),
                'edit_item' => __('Edit Portfolio Category', 'itc'),
                'update_item' => __('Update Portfolio Category', 'itc'),
                'add_new_item' => __('Add New Portfolio Category', 'itc'),
                'new_item_name' => __('New Portfolio Category Name', 'itc'),
                'menu_name' => __('Portfolio Category', 'itc'),
            'show_ui' => true,
            'query_var' => true,
            'rewrite' => array('slug' => 'service-view'),
 add_action('init', 'my_post_types');



创建页面模板 page-portfolio.php


 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar


新建 portfolio 页面

页面-》新建页面; 注意在右边页面属性-> 模板 里选择 portfolio. ok, portfolio 页面建成了,打开预览。神马?空白!别急,还没完成。

引入jQuery 插件 Isotope and Infinite Scroll

编辑 page-portfolio.php

 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar
$taxonomy = 'portfolio_category';
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.isotope.min.js'></script>
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.infinitescroll.min.js'></script>

前提:在 get_header() 已经调用了 jQuery ;jquery.isotope.min.js 和 jquery.infinitescroll.min.js 已经保存到主题文件夹里的 js 文件夹里。

建立 Portfolio 的 Filters

            <div id="options" class="page-title clearfix">
                <h1><?php the_title() ?></h1>
        $all_portfolio_category = get_terms($taxonomy);
        $count_portfolio_category = count($all_portfolio_category);
        if ($count_portfolio_category > 0) {
            echo '<ul class="tags option-set" id="filters" data-option-key="filter">';
            echo '<li><a href="#filter" data-option-value="*" class="selected" title="All"><span><img src="<?php bloginfo('template_url') ?>/images/all.png" alt="Hosting"></span></li>';
            foreach ($all_portfolio_category as $term) {
                echo '<li><a href="#filter" data-option-value=".' . $term->slug . '" title="' . $term->name . '"><span><img src=' . z_taxonomy_image_url($term->term_id) . ' alt="' . $term->name . '" ></span></a></li>';
            echo '</ul>';

分页形式列出 portfolioes

           <div id="project_show" class="clearfix">
    'post_type' => 'portfolio',                    
    'posts_per_page' => 9,
    'is_paged' => TRUE, 
    'paged' => max(1, get_query_var('paged'))));
 while ( have_posts()) :  the_post();
$portfolio_terms = get_the_terms(get_the_ID(), $taxonomy );
if ( $portfolio_terms &#038;& ! is_wp_error( $portfolio_terms ) ) : 

	$data_category = array();

	foreach ( $portfolio_terms as $portfolio_term ) {
		$data_category[] = $portfolio_term->slug;
	$data_categories = join( " ", $data_category );

                <div class="element one_third <?php echo $data_categories;?>" data-symbol="<?php the_title()?>" data-category="<?php echo $data_categories;?>">
                    <div class="third_wrap">
                        <div class="project clearfix">


 <?php toolbox_content_nav('nav-below'); ?>   

Js 实例

      var $container = $('#project_show');

        itemSelector : '.element'
        navSelector  : '.nav-previous',    // selector for the paged navigation 
        nextSelector : '.nav-previous a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more projects to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        var $optionSet = $this.parents('.option-set');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' &#038;& typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        return false;


到这儿工作就基本上完成了,去试试,已经有效果的,但是并没有人家那么梦幻,是因为支持动画的 CSS 还没有引入。

将下面的CSS加入到 style.css 里,或者独立调用也行。

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;

/**** Isotope CSS3 transitions ****/

.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-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;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
body {
  height: 100%;

.element {
  width: 320px;
  height: 220px;
  float: left;
  overflow: hidden;
  position: relative;

/**** Example Options ****/

#options li a:hover {
  background-color: #0081cc;

#options li a:active {
  background-color: #0085d6;

#options li a.selected {
  background-color: #0085d6;

/* Combination filter options*/

#options .option-combo {
  display: inline-block;
  float: left;
  margin-right: 10px;

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;


Simple jquery horizontal accordion


html code

  • Freebies
    Download free files to make your job easier.

  • Tutorials
    Tips and tricks to help you keep up with the latest technology.

  • Inspiration
    Get inspired by what other designers are doing.

  • Inspiration
    Get inspired by what other designers are doing.

css dode

#horizontal_accordion{   list-style: none;   margin: 0 0 0 -2px;   padding: 0;   background:#dedede;   height:auto;  width:664px;   display:block;   height:115px; border:1px solid #c5c5c5; border-right:none;  }

#horizontal_accordion li{ overflow: hidden;   width: 109px; height:115px; padding:0; float: left;   display: block;    list-style:none;  background:none;   border-right:1px solid #c5c5c5;}
#horizontal_accordion .eightdgift { background:url(../images/8dgif.png) #dbdbdb no-repeat;}
#horizontal_accordion .currnet { width: 333px; background-position: 0 -115px; background-color:#fff;}

#horizontal_accordion li p{   margin: 0;   padding: 20px 20px 20px 130px;   display: block;}

javascript code