数多くあるjQuery画像ギャラリー系のプラグインの中で、
比較的シンプルだけれどもクールにかっこよく魅せることが出来る画像ギャラリープラグイン
「jPhotoGrid – A Beautify jQuery Image Gallery」が使いやすそうだったのでご紹介。

jPhotoGrid – A Beautify jQuery Image Gallery


jPhotoGrid – A Beautify jQuery Image Gallery


デモはこちら:A Demo of jPhotoGrid – GetHiFi

サムネイルを敷き詰め、クリックするとモーダルウィンドウの要領で
ポップアップが開き、拡大画像が表示されます。

サムネイルが並んでいる状態では明度が落とされいますが
ロールオーバーで明るくなります。

全体的にCSS3でドロップシャドウなど付けられているので
未対応ブラウザでは見た目が変わってしまいますが、
クリックして拡大する動きなどについては動作します。

下記の様な記述で実行用スクリプト上にCSSで
サムネイルサイズと拡大サイズを指定できるもよう。

◆SCRIPT
$('#pg').jphotogrid({
	baseCSS: {
		width: '175px',
		height: '117px',
		padding: '0px'
	},
	selectedCSS: {
		top: '50px',
		left: '100px',
		width: '500px',
		height: '360px',
		padding: '10px'
	}
});

拡大後は「NEXT」「BACK」の様なボタンは無く、
あくまで拡大表示のみの動作になっています。

そのまま使うも良し、スクリプトを自作用の参考にするも良し、
といったプラグインかなと感じます。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

カッコよくシンプルに画像ギャラリーを組み込めるjQueryプラグイン「jPhotoGrid – A Beautify jQuery Image Gallery」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR