Форумы портала PHP.SU

CODE (html):
скопировать код в буфер обмена

<section class="container content">
        <section id="filter">
        <a href="#" id="all" class="button icon grid active">All</a>
                <a href="#" id="lt" class="button">Logotypes</a>
                <a href="#" id="wp" class="button">Wallpapers</a>
                <a href="#" id="pr" class="button">Prints</a>
    </section>
        <div class="thumb pr">
                <a href="images/design-print_full.png" rel="shadowbox">
                        <img src="images/design-print_thumb.png" />
                </a>
        </div>
        <div class="thumb lt">
                <a href="images/4fame-style_full.png" rel="shadowbox">
                        <img src="images/4fame-style_thumb.png" />
                </a>
        </div>
        <div class="thumb wp">
        <a href="images/love-wallpaper_full.png" rel="shadowbox">
                        <img src="images/love-wallpaper_thumb.png" />
        </a>
        </div>
        <div class="thumb lt">
                <a href="images/diamond-logo_full.png" rel="shadowbox">
                <img src="images/diamond-logo_thumb.png" />
                </a>
        </div>
        <div class="thumb wp">
        <a href="images/love-wallpaper_full.png" rel="shadowbox">
                        <img src="images/love-wallpaper_thumb.png" />
        </a>
        </div>
    <div class="thumb lt">
                <a href="images/4fame-style_thumb.png" rel="shadowbox">
                <img src="images/4fame-style_thumb.png" />
                </a>
        </div>
    <div class="thumb lt">
                <a href="images/diamond-logo_full.png" rel="shadowbox">
                <img src="images/diamond-logo_thumb.png" />
                </a>
        </div>
        <div class="thumb wp">
                <a href="images/end-wallpaper_full.png" rel="shadowbox">
                        <img src="images/end-wallpaper_thumb.png" />
                </a>
        </div>
        <div class="thumb pr">
                <a href="images/design-print_full.png" rel="shadowbox">
                        <img src="images/design-print_thumb.png" />
                </a>
        </div>
    <div class="thumb lt">
                <a href="images/diamond-logo_full.png" rel="shadowbox">
                <img src="images/diamond-logo_thumb.png" />
                </a>
        </div>
        <div class="thumb lt">
                <a href="images/diamond-logo_full.png" rel="shadowbox">
                <img src="images/diamond-logo_thumb.png" />
                </a>
        </div>
        <div class="thumb wp">
        <a href="images/love-wallpaper_full.png" rel="shadowbox">
                        <img src="images/love-wallpaper_thumb.png" />
        </a>
        </div>
        <div class="thumb lt">
                <a href="images/diamond-logo_full.png" rel="shadowbox">
                <img src="images/diamond-logo_thumb.png" />
                </a>
        </div>
        <div class="thumb wp">
        <a href="images/love-wallpaper_full.png" rel="shadowbox">
                        <img src="images/love-wallpaper_thumb.png" />
        </a>
        </div>
        <div class="thumb lt">
                <a href="images/4fame-style_full.png" rel="shadowbox">
                <img src="images/4fame-style_thumb.png" />
                </a>
        </div>
</section>

CODE (javascript):
скопировать код в буфер обмена

$('#filter a').click(function() {
        $('#filter .active').removeClass('active');
        $(this).addClass('active');
  
        var filter = $(this).attr('id');
  
        if (filter == 'all') {
            $('.hidden').animate({opacity: 1.0}, 500).removeClass('hidden');
        }
                else {
            $('.thumb').each(function() {
                if ( ! $(this).hasClass(filter)) {
                    $(this).animate({opacity: 0.1}, 500).addClass('hidden');
                }
                                else {
                    $(this).animate({opacity: 1.0}, 500).removeClass('hidden');
                }
            });
        }
  
        return false;
    });