skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」
｜
｜
｜
｜
｜
｜
LightBoxなんてもう古い。
もっとクールに画像を見せ付けましょう。
JavaScriptライブラリmootoolsのプラグイン「UvumiTools Gallery Plugin」です。
使用方法
UvumiTools Gallery Pluginからファイル一式をダウロードします。
<script type="text/javascript" src="mootools-for-gallery.js"></script>
<script type="text/javascript" src="UvumiGallery-compressed.js"></script>
<script type="text/javascript">
new UvumiGallery({container:'gallery'});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="uvumi-gallery.css" />
<style>
#gallery{
margin:20px;
height:300px;
width:600px;
position:relative;
color:#aaa;
padding:20px;
overflow:hidden;
border:1px solid #888;
background-color:#000;
}
</style>
上記を記述したら、画像を以下のように書きます。
<div id="gallery">
<a href="画像パス"><img src="画像パス" alt="オルト" />
<a href="画像パス"><img src="画像パス" alt="オルト" />
<a href="画像パス"><img src="画像パス" alt="オルト" />
<a href="画像パス"><img src="画像パス" alt="オルト" />
<a href="画像パス"><img src="画像パス" alt="オルト" />
</div>
クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」サンプル
記事作成：2009年04月15日
▼クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：jQuery製で柔軟性の高いアコーディオンメニュー「Flexible Accordion」
次の記事：mootoolsで洗練されたメニューを作成する「Lavish Menu」
