NyroModal :: jQuery Plugin
lightbox風のスクリプト NyroModal :: jQuery Pluginの紹介をします。
以前、どこかのサイトの画像をクリックしたら、周りが暗くなって、少し大きめの画像が出てくる・・
これは、なんだ？？どういう仕組み？と思って、調べていたらたどり着いたものですので。
忘れないうちに自分の為にも記述しておきます。
NyroModal :: jQuery Plugin
こちらのサイトは、英語ですが、気にせず真ん中よりちょっと下辺りのDownloadの文字を探してください。
上記の文字があります。
「here」をクリックする。ダウンロードが開始します。
ダウンロードしたファイルを解凍して、ファイルにある「js」「styles」「img」フォルダをアプロードします。
ページのhtmlソースの<head>タグ内に以下のソースをコピペします。
| <link rel="stylesheet" href="styles/nyroModal.css" _fcksavedurl=""styles/nyroModal.css"" _fcksavedurl=""styles/nyroModal.css"" _fcksavedurl=""styles/nyroModal.css"" type="text/css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> _fcksavedurl=""http://www.google.com/jsapi"></script>" _fcksavedurl=""http://www.google.com/jsapi"></script>" <script type="text/javascript">google.load("jquery", "1.2");</script> <script type="text/javascript" src="js/jquery.nyroModal-1.5.0.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.5.0.js"></script> |
使用したい画像のリンク箇所の「a」タグ内に「class="nyroModal"」とつけてください。
画像をグループ化にしたい場合は「rel="gal"」もつけると、クリックすると、次の画像を表示できるようになります。
あっという間に、ちょっと見栄えのするサイトが出来上がります。
作品をたくさん載せたいポートフォリオサイトなんかにいいかもしれませんね。
カテゴリ：WEB制作日記
