мой код здесь
Код: Выделить всё
// JavaScript
jQuery(document).ready(function($){
// Activate isotope in container
$(".portfolio_active").isotope({
itemSelector: '.single_item',
layoutMode: 'fitRows',
});
$(".portfolio_active").isotope({
filter: '*',
});
// Add isotope click function
$('.portfolio_nav li').click(function(){
$(".portfolio_nav li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr('data-filter');
$(".portfolio_active").isotope({
filter: selector,
animationOptions: {
duration:750,
easing: 'linear',
queue: false,
}
});
return false;
});
});Код: Выделить всё
/* CSS */
.portfolio_section {
padding: 100px 0;
background: #ffffff;
}
.portfolio_nav {
margin-top: 50px;
}
.portfolio_nav li {
font-family: 'Open Sans', sans-serif;
color: #999999;
cursor: pointer;
display: inline;
font-size: 14px;
margin-right: 20px;
padding-right: 20px;
position: relative;
}
.portfolio_nav li.active {
color: #e74c3c;
}
.portfolio_nav li::before {
background: #999999 none repeat scroll 0 0;
content: "";
height: 60%;
position: absolute;
right: 0;
top: 25%;
transform: rotate(20deg);
width: 2px;
}
.portfolio_nav li:last-child::before {
display: none;
}
.portfolio_active {
margin-top: 45px;
}
.single_item {
width: 25%;
float: left;
position: relative;
transition: 0.5s ease-in-out;
}Код: Выделить всё
RECENT WORKS
It has survived not only five centuries, but also the leap scrambled it to make a type.
[list]
[*]ALL
[*]PRINT DESIGN
[*]ANIMATION
[*]ART
[*]WEB DESIGN
[*]PHOTOGRAPHY
[*]VIDEO
[/list]
[img]images/portfolio/2.jpg[/img]
[h4]T-SHIRT DESIGN[/h4]
art / t-shirt
[img]images/portfolio/3.jpg[/img]
[img]images/portfolio/4.jpg[/img]
[img]images/portfolio/5.jpg[/img]
[img]images/portfolio/6.jpg[/img]
[img]images/portfolio/7.jpg[/img]
[img]images/portfolio/8.jpg[/img]
[img]images/portfolio/1.jpg[/img]
Подробнее здесь: https://stackoverflow.com/questions/399 ... ick-on-the
Мобильная версия