WEBメモ: Shadowbox.js version 3.0.3 を設置しました 2

2015/07/23

shadowbox を使ってみました。

shadowbox

■ shadowboxのサイト(英語)
■ 設置方法が詳しく書いてあるサイト。とても参考になりました

1.まず、本家のサイトに行って、右上にある青色のボタンから、ファイル一式をDLします
http://www.shadowbox-js.com/index.html

2.DLしたファイルを解凍し、自サイト内に設置します

3.htmlファイルの head内に、こちらのソースを貼り付けます

link rel=”stylesheet” type=”text/css” href=”shadowbox.css“>
script type=”text/javascript” src=”shadowbox.js“>
script type=”text/javascript”>
Shadowbox.init({
language: ‘ja’,
handleOversize: “drag“,
players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’]
});
/script>

※1 は全角になっているので、半角に直して下さい。
※2 青字部分はそれぞれのパスに変更して下さい(js/shadowbox.js や、css/shadowbox.css など)

大きな画像をドラッグしながら移動できるようにするには、
handleOversize: “drag” の一行が必要です。

htmlファイルを表示するには、
players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’] の中に、 ‘html’ が含まれている必要があります。

これだけで設置完了。 できてみれば すっごく簡単!

後は、shadowbox 表示にしたい a要素に、rel=”shadowbox” を追加するだけです。
■ こんな風に

a href=”large.jpg” rel=”shadowbox”>

■ 大きな画像をドラッグしながら移動できるようにする場合はこんな風に

a href=”large.jpg” rel=”shadowbox;options={handleOversize:’drag’}”>

■ 問い合わせフォームなどhtmlファイルを表示するならこんな風に

a href=”form.html” rel=”shadowbox;width=600;height=600″>

shadowbox;width=600;height=600 でボックスのサイズも決められます。

ここまで分かってから本家のサイトを改めて見たら、ちゃんと全部書いてありました。
英語だけど

ver3以前とは設置方法が大きく変わっているらしいのでご注意ください!!

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