Flickr・Picasa・Google+に対応している画像ギャラリー「nanoGALLERY」
当ページのリンクには広告が含まれています。
スポンサーリンク
Flickr・Picasa・Google+に対応している画像ギャラリーを実装するプラグイン「nanoGALLERY」を紹介します。
jQueryプラグイン「nanoGALLERY」
このプラグインを使えば、レスポンシブなグリッドデザインに対応した画像ギャラリーを簡単に作成することができます。
さらに Flickr・Picasa・Google+ のクラウド上に保存している画像をサイト上の掲載することもできます。
かっこいいデザインなので、おすすめプラグインです。
スポンサーリンク
それではデモページの画像ギャラリーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="nanoGALLERY のデモでーす。">
<title>nanoGALLERY - jQueryプラグイン</title>
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.nanogallery.js"></script>
<script>
$(document).ready(function () {
jQuery("#demo").nanoGallery({thumbnailWidth:160,thumbnailHeight:160,
itemsBaseURL:'images',
thumbnailHoverEffect:[{'name':'scaleLabelOverImage','duration':300},{'name':'borderLighter'}],
colorScheme:'clean',
thumbnailLabel:{display:true,position:'overImageOnTop', align:'center'},
viewerDisplayLogo:true
});
});
</script>
</head>
<body>
<h1>nanoGALLERY のデモでーす。</h1>
<div id="demo">
<a href="01-red.png" data-ngthumb="01-red-thumb.png" data-ngdesc="赤だよ。">赤</a>
<a href="02-orange.png" data-ngthumb="02-orange-thumb.png" data-ngdesc="橙だよ。">橙</a>
<a href="03-yellow.png" data-ngthumb="03-yellow-thumb.png" data-ngdesc="黄だよ。">黄</a>
<a href="04-green.png" data-ngthumb="04-green-thumb.png" data-ngdesc="緑だよ。">緑</a>
<a href="05-blue.png" data-ngthumb="05-blue-thumb.png" data-ngdesc="青だよ。">青</a>
<a href="06-indigo.png" data-ngthumb="06-indigo-thumb.png" data-ngdesc="藍だよ。">藍</a>
<a href="07-purple.png" data-ngthumb="07-purple-thumb.png" data-ngdesc="紫だよ。">紫</a>
</div>
</body>
</html>
スポンサーリンク