今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. くるくる回る画像ギャラリー「Rondell」
  3. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  4. 画像に拡大・縮小ボタンを「Zoomer」
  5. 画像の拡大・縮小と移動(パン)「pan and zoom 」

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>
スポンサーリンク

関連記事(一部広告含む)