« canvasを利用してグラフを制作するjQueryのプラグイン | トップページ | CSSとjQuery利用したスライドショー »

2011年2月28日 (月)

選択した画像だけをポップアップしてくれるjQueryのプラグイン

選択した画像だけをポップアップしてくれるjQueryのプラグイン「jSlickmenu」をご紹介します。

デモページ

使用するリソース
jquery.js
jquery.jslickmenu.js

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.jslickmenu.js"></script>
<link rel="stylesheet" type="text/css" href="フォルダ名/slickmenu.css"/>
<script type='text/javascript'>
$(document).ready(function()
{
$("#ID名").jSlickmenu({
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});
});
</script>

オプションの設定
speed : 100, アニメーションの速度を設定します。
fadeopacity : 0.1, 表示されていない画像の不透明度を設定します。
infomargin : 15, 画像とキャプションの文字の幅を調節します。
leftmargin : 150, 画像と画像の間の幅を調節します。
css3rotate : false, 回転させたい場合はtrueをさせない場合はfalseで記述します。
css3shadow : '#999 5px 10px 10px', 画像の周りにある影の値を設定します。
css3borderradius : 3, 画像の影のコーナーの角丸を設定します。
borderneutral : 5, ポップアップしてない状態の画像の影の幅を設定します。
borderhover : 20 ポップアップしたときの画像の影の幅を設定します。

htmlへの記述方法(例)
<div id="ID名">
 <ul>
  <li><a href="[LINK1]"><img src="[IMG1]" alt="[TITLE1]"></a></li>
  <li><a href="[LINK2]"><img src="[IMG2]" alt="[TITLE2]"></a></li>
  <li><a href="[LINK3]"><img src="[IMG3]" alt="[TITLE3]"></a></li>
  <li><a href="[LINK4]"><img src="[IMG4]" alt="[TITLE4]"></a></li>
  <li><a href="[LINK5]"><img src="[IMG5]" alt="[TITLE5]"></a></li>
 </ul>
</div>

表示させたい写真の分だけ li タグで記述します。

|

« canvasを利用してグラフを制作するjQueryのプラグイン | トップページ | CSSとjQuery利用したスライドショー »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39012036

この記事へのトラックバック一覧です: 選択した画像だけをポップアップしてくれるjQueryのプラグイン:

« canvasを利用してグラフを制作するjQueryのプラグイン | トップページ | CSSとjQuery利用したスライドショー »