ดาวน์โหลดฟรี

ดาวน์โหลด jQuery images
เข้าชมทั้งหมด : 567 ครั้ง | ดาวน์โหลด : 158 ครั้ง | หมวด : Image Effects


jQuery images Interactive and Filterable Plugin

The plugin is configurable to work with just about any markup.

Filters

1 <ul id="portfolio-filter">
2     <li><a href="#all">All</a>
3 </li>
4     <li><a rel="design" href="#jquery">jQuery</a>
5 </li>
6     ...
7 </ul>

Portfolio Items

1 <ul id="portfolio-list">
2     <li class="business partner jquery">
3         <a href="#"><img src="/hifi/site/edit/blog/" alt=""></a>
4         <p>Saranac</p>
5     </li>
6     ...
7 </ul>

Of course the markup can be completely arbitrary. All of the styling is done in css. There are only two major requirements:

  1. Linking Filters to Items - The hashed href of the filter link must match the class of the portfolio item. In the example above, the #jquery filter matches the last class of the only portfolio item.
  2. Portfolio Items are Wrapped - As you'll see in the JS section below, the plugin is called on a wrapper of the portfolio items. In this case, the wrapper is the
      .

Javascript/jQuery Setup

The jQuery is really simple to set up. If you use the same markup as I have, you can even leave out the settings and it should work out of the box. Simply do the following after you have included the filterable plugin:

1 $(document).ready(function(){
2     $('portfolio-list').filterable();
3 });

The plugin will also take a number of optional parameters. These are the defaults:

01 settings = $.extend({
02     useHash: true,
03     animationSpeed: 1000,
04     show: { width: 'show', opacity: 'show' },
05     hide: { width: 'hide', opacity: 'hide' },
06     useTags: true,
07     tagSelector: '#portfolio-filter a',
08     selectedTagClass: 'current',
09     allTag: 'all'
10 }, settings);

To change any of the defaults, just pass them in to the initial call:

1 $(document).ready(function