Flickr・Picasa・Google+に対応している画像ギャラリーを実装するプラグイン「nanoGALLERY」を紹介します。
jQueryプラグイン「nanoGALLERY」
このプラグインを使えば、レスポンシブなグリッドデザインに対応した画像ギャラリーを簡単に作成することができます。
さらに Flickr・Picasa・Google+ のクラウド上に保存している画像をサイト上の掲載することもできます。
かっこいいデザインなので、おすすめプラグインです。
それではデモページの画像ギャラリーをご覧ください。
「nanoGALLERY」のデモ
デモのソース(HTML + jQuery)
< 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 > |
$(document).ready(function () { |
jQuery("#demo").nanoGallery({thumbnailWidth:160,thumbnailHeight:160, |
thumbnailHoverEffect:[{'name':'scaleLabelOverImage','duration':300},{'name':'borderLighter'}], |
thumbnailLabel:{display:true,position:'overImageOnTop', align:'center'}, |
< h1 >nanoGALLERY のデモでーす。</ h1 > |
< 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 > |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。