Lightbox風のスクリプト NyroModal :: jQuery Plugin

NyroModal :: jQuery Plugin

nyroModalはjQueryのプラグインです。

個人的に気に入っているので、お勧めWebサイトでも使っていますし、以前紹介したlightviewみたいにhtmlや他のメディアを表示したりもしてくれます。

本家サイトnyroModal :: jQuery Pluginは英語ですし、「使い方が分からない」って方の為に解説したいと思います。

…ここからが続き

NyroModalの使い方

  1. nyroModal :: jQuery Pluginの下部にある
    NyroModal :: jQuery Plugin からダウンロード
  2. 解凍したファイルにある「js」「styles」「img」フォルダをアプロード。
  3. headタグ内に下記ソースを記述
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" />
<script type="text/javascript" src="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.2.8.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal-1.2.8.js"></script>

次にNyroModalを使用したい箇所の「a」タグ内に「class="nyroModal"」とつける。
画像をグループ化にしたい場合は「rel="gal"」もつけます。

基本的に「a」タグ内に「class="nyroModal"」とつけておけば、リンク先のページが画像であれ、htmlであれnyroModalで開いてくれます。

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article