Slider do webIQ - portfolio

Slider do webIQ - portfolio

HTML

<ul class="tabs portfolio-filter">
    <li class="selected"><a class="all" href="#">All</a></li>
    <li><a class="logo" href="#">Logo</a></li>
    <li><a class="print" href="#">Print Design</a></li>
    <li><a class="e-commerce" href="#">E-Commerce</a></li>
</ul>
<ul id="portfolio-items">
    <li class="all logo website e-commerce"> Site 1: all logo website e-commerce </li>
    <li class="all logo website e-commerce"> Site 2: all logo website e-commerce </li>
    <li class="all logo website"> Site 3: all logo website </li>
    <li class="all logo website print"> Site 4: all logo website print </li>
    <li class="all logo print website"> Site 5: all logo print website</li>
    <li class="all logo print website"> Site 6: all logo print website</li>
    <li class="all logo website"> Site 7: all logo website</li>
    <li class="all logo website"> Site 8: all logo website e-commerce </li>
    <li class="all logo website e-commerce"> Site 9: all logo website e-commerce </li>
    <li class="all website"> Site 10: all website </li>
</ul>
<ul class="pagination">
    <li><a class="href-1" href="#">1</a></li>
    <li><a class="href-2" href="#">2</a></li>
    <li><a class="href-3" href="#">3</a></li>
    <li><a class="href-4" href="#">4</a></li>
</ul>

CSS

a {color: #444; text-decoration: none;}
.selected a { color: red;}


.portfolio-filter { border-bottom: 2px solid #000; overflow: auto;}
.portfolio-filter li { margin: 3px; display:inline; float: left; font-size: 12px;}

.pagination { border-top: 2px solid #000; overflow: auto;}
.pagination li { display: inline; float; left; margin: 3px; font-size: 11px;}
.pagination li a.active { color: red;}

#portfolio-items { margin: 20px 0px;}

JavaScript

(function($) {

    $.fn.CreateTabs = function(filterClass) {

        var CoundNumberOfDivs = $('#portfolio-items li:visible').length;
        $('.pagination li a').hide();
        if (CoundNumberOfDivs <= 4) {
            return false;
        }
        else {
            var num = Math.ceil(CoundNumberOfDivs / 4);
            $('.pagination li a:lt(' + num + ')').show();
            $('#portfolio-items li').hide();
            if (filterClass === undefined) {
                $('#portfolio-items li:lt(4)').show();
            } else {
                $('#portfolio-items li.' + filterClass + ':lt(4)').show();
            }
        }

    };
})(jQuery);

$(document).ready(function() {

    
   // $('#portfolio-items").CreateTabs = function();
    $('#portfolio-items li').CreateTabs();   
    var filterClass = "all";

    $('.portfolio-filter li a').click(function() {


        $('.portfolio-filter > .selected').prop('class', '');
        $(this).parent('li').addClass('selected');

        filterClass = $(this).attr('class');

        $('#portfolio-items li').hide();
        $('#portfolio-items li.' + filterClass).show();
        $('#portfolio-items').CreateTabs(filterClass);

    });

    $('ul.pagination li a').click(function(event) {
        $('ul.pagination li .active').removeClass('active');
        $(this).addClass('active');

        var PI = $('#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : '');
        $('#portfolio-items li').hide();


        if ($(this).hasClass('href-1')) {
            PI.slice(0, 4).show();
        }
        else if ($(this).hasClass('href-2')) {

            PI.slice(4, 8).show();
        }
        else if ($(this).hasClass('href-3')) {
            PI.slice(8, 12).show();
        }
        else if ($(this).hasClass('href-4')) {
            PI.slice(12, 16).show();
        }
        else if ($(this).hasClass('href-5')) {
            PI.slice(16, 20).show();
        }
        else if...