【 jQuery 】 jQuery Filtering かっこいい画像配置 切り替え
jQueryを使って、jQuery Filteringというかっこいい画像配置、切り替え方法を紹介します。
ポートフォリオにも利用できるのでおすすめです。
今回は画像サイズを100px X 100px で作っていますが簡単にカスタマイズできるので試してみて下さい。
DEMO_PAGE jQuery Filtering
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Filtering</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/filtering.js"></script> </head> <body> <div id="container"> <h1>jQuery Filtering</h1> <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a> | <a href="javascript:void(0);" class="canada">CANADA</a> | <a href="javascript:void(0);" class="germany">GERMANY</a> | <a href="javascript:void(0);" class="africa">AFRICA</a> | <a href="javascript:void(0);" class="egypt">EGYPT</a> </div> <div id="filterlist"> <ul> <li class="canada"><a href="#"><img src="img/canada1.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa1.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany1.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada2.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada3.jpg" alt=""></a></li> <li class="egypt"><a href="#"><img src="img/egypt1.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada4.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa2.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany2.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa3.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany3.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada5.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada6.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany4.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa4.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada7.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany5.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada8.jpg" alt=""></a></li> <li class="egypt"><a href="#"><img src="img/egypt2.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa5.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada9.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany6.jpg" alt=""></a></li> <li class="egypt"><a href="#"><img src="img/egypt3.jpg" alt=""></a></li> <li class="canada"><a href="#"><img src="img/canada10.jpg" alt=""></a></li> <li class="egypt"><a href="#"><img src="img/egypt4.jpg" alt=""></a></li> <li class="africa"><a href="#"><img src="img/africa6.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany7.jpg" alt=""></a></li> <li class="germany"><a href="#"><img src="img/germany8.jpg" alt=""></a></li> </ul> </div> <p><small>COPYRIGHT © jQuery Filtering ALL RIGHTS RESERVED.</small></p> </div><!--/#container--> </body> </html>
【style.css】
@charset "utf-8";
body {
font-size: 16px;
line-height: 1.5;
font-family: Arial,Helvetica,sans-serif;
color: #000;
text-align: center;
background: #FFF;
}
a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}
#container {
margin: 0 auto;
width: 550px;
text-align: center;
}
h1 {
margin-bottom: 20px;
padding: 10px 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
}
h2 {
padding: 30px 0;
width: 100%;
font-size: 12px;
}
/* #filter */
#filter {
margin: 0 auto;
padding: 15px 0;
width: 550px;
text-align: center;
}
#filter a:link { text-decoration:underline; color: #000;}
#filter a:visited { text-decoration:none; color: #000;}
#filter a:active { text-decoration:none; color: #000;}
#filter a:hover { text-decoration:none; color: #000;}
#filter .active {
font-weight: bold;
}
#filter a.active:link { text-decoration:none; color: #000;}
#filter a.active:visited { text-decoration:none; color: #000;}
#filter a.active:active { text-decoration:none; color: #000;}
#filter a.active:hover { text-decoration:none; color: #000;}
/* #filterlist */
#filterlist {
margin: 0 auto;
width: 550px;
text-align: left;
}
#filterlist ul {
margin: 0 auto;
padding: 0;
width: 550px;
text-align: left;
}
#filterlist ul li {
margin: 5px;
width: 100px;
text-align: left;
float: left;
display: inline;
overflow: hidden;
}
#filterlist ul li img {
width: 100px;
float: left;
}
/* ClearFix */
#filterlist ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#filterlist ul {
display: inline-block;
overflow: hidden;
}【filtering.js】
$(function(){
var $setFilter = $('#filter'),
$setList = $('#filterlist'),
$setFilterAll = $('.allitem');
var showFade = 1500,
showShut = 1500,
hideFade = 1000,
hideShut = 1000;
var $setFilterBtn = $setFilter.children('a'),
$setFilterList = $setList.children('ul').children('li'),
$filterAllItem = $setFilterAll.attr('class');
$setFilterBtn.click(function(){
if(!($(this).hasClass('active'))){
var filterClass = $(this).attr('class');
$setFilterList.each(function(){
if($(this).hasClass(filterClass)){
$(this).css({display:'block'});
$(this).find('*').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'100px'},showShut);
} else {
$(this).find('*').stop().animate({opacity:'0'},hideFade);
$(this).stop().animate({width:'0'},hideShut,function(){
$(this).css({display:'none'});
});
}
});
$setFilterBtn.removeClass('active');
$(this).addClass('active');
}
});
$setFilterAll.click(function(){
$setFilterList.each(function(){
$(this).css({display:'block'});
$(this).find('*').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'100px'},showShut);
});
});
$setFilterAll.click();
});
