jQuery

【jQuery】フィルター機能も付いたギャラリー。Animated Masonry Gallery with Filters

April 7, 2016
Animated Masonry Gallery with Filters

Animated Masonry Gallery with Filtersは画像をタイル状に並べてくれるMasonryにフィルター機能も付いた素晴らしいギャラリー。

商業利用はできないようなので使用の前にライセンスを確認してください。

HTML

id=”gallery”で囲み起動。

<div id="gallery"></div>

id=”gallery-header”の中にリサイズアイコン、ギャラリーのタイトル、フィルターボタンを入れる。

<div id="gallery-header">
<div id="gallery-header-center">
<div id="gallery-header-center-left">
<div id="gallery-header-center-left-icon"><span class="iconb" data-icon=""></span></div>
<div id="gallery-header-center-left-title">All Galleries</div>
</div>
<div id="gallery-header-center-right">
<div class="gallery-header-center-right-links" id="filter-all">All</div>
<div class="gallery-header-center-right-links" id="filter-studio">Studio</div>
<div class="gallery-header-center-right-links" id="filter-landscape">Landscapes</div>
</div>
</div>
</div>

id=”gallery-content” に画像などを入れる。

<div id="gallery-content">
<div id="gallery-content-center">
<img src="_assets/studio1.jpg" class="all studio"/>
<img src="_assets/landscape1.jpg" class="all landscape">
<img src="_assets/studio2.jpg" class="all studio"/>
</div>
</div>

CSS

#gallery{
float: left;
width: 100%;
}
#gallery-header{
height: 100px;
width: 100%;
float: left;
}
#gallery-header-center{
	height: 100px;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
}
#gallery-header-center-left{
	float: left;
	height: 35px;
	line-height: 35px;
	margin-top: 32px;
}
#gallery-header-center-left-icon{
	float: left;
	height: 35px;
	width: 35px;
	background-color: rgba(63,141,191,1);
	color: rgba(255,255,255,1);
	text-align: center;
	font-size: 20px;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
}
#gallery-header-center-left-icon:hover {
	background-color: rgba(63,141,191,0.5);
	cursor: pointer;
}
#gallery-header-center-left-title{
	float: left;
	height: 35px;
	font-size: 25px;
	color: #3f8dbf;
	margin-left: 20px;
}
#gallery-header-center-right{
	float: right;
	height: 35px;
	margin-top: 32px;
	line-height: 35px;
}
.gallery-header-center-right-links {
	color: #333333;
	float: left;
	height: 35px;
	padding-right: 20px;
	padding-left: 20px;
	margin-left: 20px;
	font-size: 16px;
	font-weight: 400;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
	background-color: rgba(63,141,191,1);
	color: rgba(255,255,255,1);
	cursor: pointer;
}
.gallery-header-center-right-links-current {
	color: #FFFFFF;
	background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
	background-color: rgba(63,141,191,0.5);
}
#gallery-content{
	float: left;
	width: 100%;
}
.gallery-content-center-normal {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
}
.gallery-content-center-full {
	float: left;
	width: 100%;
}
#gallery-content-center img {
	width: 300px;
	margin-bottom: 10px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	margin-left: 10px;
}

JavaScript

var size = 0;
var button = 1;
var button_class = "gallery-header-center-right-links-current";
var normal_size_class = "gallery-content-center-normal";
var full_size_class = "gallery-content-center-full";
var $container = $('#gallery-content-center');
$container.isotope({itemSelector : 'img'});
function check_button(){
	$('.gallery-header-center-right-links').removeClass(button_class);
	if(button==1){
		$("#filter-all").addClass(button_class);
		$("#gallery-header-center-left-title").html('All Galleries');
		}
	if(button==2){
		$("#filter-studio").addClass(button_class);
		$("#gallery-header-center-left-title").html('Studio Gallery');
		}
	if(button==3){
		$("#filter-landscape").addClass(button_class);
		$("#gallery-header-center-left-title").html('Landscape Gallery');
		}	
}
function check_size(){
	$("#gallery-content-center").removeClass(normal_size_class).removeClass(full_size_class);
	if(size==0){
		$("#gallery-content-center").addClass(normal_size_class); 
$("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
		}
	if(size==1){
		$("#gallery-content-center").addClass(full_size_class); 
$("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
		}
	$container.isotope({itemSelector : 'img'});
}
$("#filter-all").click(function() { $container.isotope({ filter: '.all' }); button = 1; check_button(); });
$("#filter-studio").click(function() {  $container.isotope({ filter: '.studio' }); button = 2; check_button();  });
$("#filter-landscape").click(function() {  $container.isotope({ filter: '.landscape' }); button = 3; check_button();  });
$("#gallery-header-center-left-icon").click(function() { if(size==0){size=1;}else if(size==1){size=0;} check_size(); });
check_button();
check_size();