Flickr・Picasa・Google+に対応している画像ギャラリー「nanoGALLERY」

当ページのリンクには広告が含まれています。

jQuery Plugin » 画像 » Flickr・Picasa・Google+に対応している画像ギャラリー「nanoGALLERY」

Flickr・Picasa・Google+に対応している画像ギャラリーを実装するプラグイン「nanoGALLERY」を紹介します。

jQueryプラグイン「nanoGALLERY」

このプラグインを使えば、レスポンシブなグリッドデザインに対応した画像ギャラリーを簡単に作成することができます。

さらに Flickr・Picasa・Google+ のクラウド上に保存している画像をサイト上の掲載することもできます。

かっこいいデザインなので、おすすめプラグインです。

それではデモページの画像ギャラリーをご覧ください。

「nanoGALLERY」のデモ

デモのソース（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>

jQueryプラグイン「nanoGALLERY」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）