2

I'm having some problems with jQuery to filter some content from a portfolio layout. Currently I'm using WordPress. Here Is my page after it opens:

<div id="portfolio" class="index works">
    <ul id="portfolio-filter" class="horiz-list">
        <li><a ref="all" title="" href="#all" class="current">All</a></li>
        <li><a ref="editorial" title="" href="#editorial" class="">Editorial</a></li>
        <li><a ref="embalagem" title="" href="#embalagem">Embalagem</a></li>
        <li><a ref="identidade-visual-coportativa" title="" href="#identidade-visual-coportativa">Identidade Visual Coportativa</a></li>
        <li><a ref="marketing" title="" href="#marketing">Marketing</a></li>
        <li><a ref="merchandising-e-pdv" title="" href="#merchandising-e-pdv">Merchandising e PDV</a></li>
        <li><a ref="sinalizacao" title="" href="#sinalizacao">Sinalização</a></li>
   </ul>     
   <div id="your_post_here_1" style="float: left;"></div>
   <ul id="portfolio-list" class="horiz-list" linha="1">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="1" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="1" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_2" style="float: left;"></div>

   <ul id="portfolio-list" class="horiz-list" linha="2">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="2" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="2" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_3" style="float: left;"></div>
</div>

This goes on forever...

And here is the jQuery

(function() {
jQuery.fn.filterable = function(settings) {
    settings = jQuery.extend({
        useHash: true,
        animationSpeed: 1000,
         easingShow: 'easeInCubic',
        easingHide: 'easeOutCubic',
        show: { width: 'show', marginRight: '20px', opacity: 'show' },
        hide: { width: 'hide', marginRight: '0', opacity: 'hide' },
        useTags: true,
        tagSelector: '#portfolio-filter a',
        selectedTagClass: 'current',
        allTag: 'all'
    }, settings);

    return jQuery(this).each(function(){

        /* FILTER: select a tag and filter */
        jQuery(this).bind("filter", function( e, tagToShow ){
            if(settings.useTags){
        jQuery(settings.tagSelector).removeClass(settings.selectedTagClass);
                jQuery(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
            }
            jQuery(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
        });

        /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
        jQuery(this).bind("filterportfolio", function( e, classToShow ){
            if(classToShow == settings.allTag){
                jQuery(this).trigger("show");
            }else{
                jQuery(this).trigger("show", [ '.' + classToShow ]   );
                jQuery(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
            }
            if(settings.useHash){
                location.hash = '#' + classToShow;
            }
        });

        /* SHOW: show a single class*/
        jQuery(this).bind("show", function( e, selectorToShow ){
            jQuery(this).children(selectorToShow).each(function() {
                  jQuery(this).animate(settings.show, settings.animationSpeed, settings.easingShow);
                  imagelink = jQuery(this).find('.entry-thumb a');
                  imagelink.attr('rel', imagelink.attr('rel').replace(/(\d)\]/, '$1_active]'));
            });
        });

        /* SHOW: hide a single class*/
        jQuery(this).bind("hide", function( e, selectorToHide ){
            jQuery(this).children(selectorToHide).each(function() {
                  jQuery(this).animate(settings.hide, settings.animationSpeed, settings.easingHide);    
                  imagelink = jQuery(this).find('.entry-thumb a');
                  imagelink.attr('rel', imagelink.attr('rel').replace('_active', ''));
            });
        });

        /* ============ Check URL Hash ====================*/
        if(settings.useHash){
            if(location.hash != '')
                jQuery(this).trigger("filter", [ location.hash ]);
            else
                jQuery(this).trigger("filter", [ '#' + settings.allTag ]);
        }

        /* ============ Setup Tags ====================*/
        if(settings.useTags){
            jQuery(settings.tagSelector).click(function(){
                jQuery('#portfolio-list').trigger("filter", [ jQuery(this).attr('href') ]);

                jQuery(settings.tagSelector).removeClass('current');
                jQuery(this).addClass('current');
            });
        }
    });
}
})(jQuery);


jQuery(document).ready(function(){

jQuery('#portfolio-list').filterable();

});

So, my problem is when i activate the filter its only happening on the first line, I probably had made a mistake when I was setting up the page, but the odd this, its that it was working! I've tried to change it back, but still notting happens... If anyone have a advice, I'll be grateful!

Simplying all that above what I want is, having a div with some lists, to filter then. Something like this:

<div>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="code"></li>
    <li class="hash"></li>
  </ul>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="marketing"></li>
    <li class="booking"></li>
  </ul>
</div>

When activated hide those who are not in the selected class Select booking for example:

<div>
  <ul id="portfolio">
    <li class="booking"></li>
  </ul>
<ul id="portfolio">
  <li class="booking"></li>
  <li class="booking"></li>
  </ul>
</div>

not exactly deleting, but putting a display none on them.

2
  • Please clarify the question; it's hard to tell what the desired goal and the problem is. Jan 30, 2012 at 16:29
  • Sorry, I made an edit on the post, I hope it helps Jan 30, 2012 at 18:07

1 Answer 1

0

Id's must be unique. change id="portfolio-list" to class="portfolio-list" and then use $(".portfolio-list").filterable();

1
  • You're right, I messed up on the id tags I'll try to change and see if it works! Jan 30, 2012 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.