Встраиваю плагин
http://www.gethifi.com/blog/a-jquery...olio-like-ours
но пока не могу заставить работать
В документации не смог понять как добавить url если скрипт лежит например тут example.com/folio
если вставить в разметку
<a href="folio#all" title="">All</a>
<a href="folio#jquery" title="" rel="jquery">jQuery</a>
криво работает
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
*/
(function($) {
$.fn.filterable = function(settings) {
settings = $.extend({
useHash: true,
animationSpeed: 1000,
show: { width: 'show', opacity: 'show' },
hide: { width: 'hide', opacity: 'hide' },
useTags: true,
tagSelector: '#portfolio-filter a',
selectedTagClass: 'current',
allTag: 'all'
}, settings);
return $(this).each(function(){
/* FILTER: select a tag and filter */
$(this).bind("filter", function( e, tagToShow ){
if(settings.useTags){
$(settings.tagSelector).removeClass(settings.selectedTagClass);
$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
}
$(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
});
/* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
$(this).bind("filterportfolio", function( e, classToShow ){
if(classToShow == settings.allTag){
$(this).trigger("show");
}else{
$(this).trigger("show", [ '.' + classToShow ] );
$(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
}
if(settings.useHash){
location.hash = '#' + classToShow;
}
});
/* SHOW: show a single class*/
$(this).bind("show", function( e, selectorToShow ){
$(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
});
/* SHOW: hide a single class*/
$(this).bind("hide", function( e, selectorToHide ){
$(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);
});
/* ============ Check URL Hash ====================*/
if(settings.useHash){
if(location.hash != '')
$(this).trigger("filter", [ location.hash ]);
else
$(this).trigger("filter", [ '#' + settings.allTag ]);
}
/* ============ Setup Tags ====================*/
if(settings.useTags){
$(settings.tagSelector).click(function(){
$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
}
});
}
})(jQuery);
$(document).ready(function(){
$('#portfolio-list').filterable();
});
<ul id="portfolio-filter">
<li><a href="folio#all" title="">All</a></li>
<li><a href="folio#jquery" title="" rel="jquery">jQuery</a></li>
</ul>
<ul id="portfolio-list">
<li class="jquery">
<a href="" title=""><img src="portfolio_files/SaranacThumb.gif" alt=""></a>
<p>
Saranac
</p>
</li>
<li class="cms">
<a href="" title=""><img src="portfolio_files/NEWSALV.gif" alt=""></a>
<p>
Salvation Army of Wake County
</p>
</li>
</ul>
