Shadowbox Ver3.0の設置方法
Shadowbox Ver3.0の設置方法をお知らせしますが、これは裏技・雑学ではありません、ご存知の方はスルーして下さい。
下記のサイト（Shadowbox.js）にアクセスし、上段右の「DownLoad」ボタンをクリック。
クリックするとページが変わり、「build」、「zip」に印を入れ、下段の「DownLoad」をクリックするとダウンロードが開始されます。
解凍後、フォルダ名を「Shadowbox3.0」に変更します。＊名前は何でもかまいません。
それとjQueryが無い場合は、左記よりダウンロードして下さい。
以外のjavasciprtライブラリでもOKのようです！
「jQuery.js」スクリプトは、どこのディレクトリでもOKですが、今回は「Shadowbox3.0」に入れました。
サーバーに「js」名でフォルダを作り、その中に「Shadowbox3.0」をそのままUPします。
次にShadowboxを入れたいファイル（html）に以下のタグを入れます。
<head></head>内に
<head>
<link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css">
<script type="text/javascript" src="js/shadowbox/jquery.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "ja",
players: ["qt","flv","html","iframe","img","qt","swf","wmp"]
});
</script>
</head>
＊上記下線部は、ユーザーの状況で変更して下さい。
後は、Shadowboxを起動させたい場所に下記のタグを入れればOK！です。
画像を入れる場合：
<p><a href="[画像の場所]" rel="shadowbox">My Image</a></p>
例：
rel="shadowbox[name]"のようにグループ化したいものに[name]をいれるとグループ化され、横移動ができるようになります。
[name]は、任意のものに変更して下さい。
<p><a href="[画像の場所]" rel="shadowbox[no1]">My Image</a></p>
例：
<p><a href="[画像の場所]" rel="shadowbox[no1]">My Image</a></p>
例：
<p><a href="[画像の場所]" rel="shadowbox[no1]">My Image</a></p>
例：
htmlを入れ込む場合：
<p><a href="[URI]" rel="shadowbox">index.html</a></p>
例：index
GoogleMapを入れ込む場合：
<p><a href="[googlemapのURI]" rel="shadowbox">国会議事堂周辺地図</a></p>
youtubeを入れ込む場合：
<p><a href="[youtubeのURI]" rel="shadowbox;width=405;height=340;
player=swf">img src="[画像のURI]" width="200" height="180"</a></p>
オートスタートさせたい場合は、[youtubeのURIの最後に&autoplay=1]を追加して下さい。
FLVを入れ込む場合
<p><a href="[flvのURI]" rel="shadowbox;width=400;height=300;
">img src="[画像のURI]" width="200" height="180"</a></p>
これだけでは起動しないので、コチラからJW FLV Media Playerをダウンロードして下さい。
その際、Include the JW Viral Plugin のレ点をはずしといて下さい。
ダウンロード後、解凍します。
次に上記の「shadowbox3.0」フォルダの中に「libraries」がありますので、その中に「mediaplayer」というフォルダを追加します。
先程解凍した「mediaplayer」の中の「player.swf」ファイルを追加した「mediaplayer」フォルダの中に入れます。
これで完了です。
|
作成した「js」フォルダの中に解凍した「shadowbox3.0」を入れます。 |
|
このフォルダをクリックすると「libraries」フォルダがあります。 |
|
この中に「mediaplayer」フォルダを作成します。 |
|
この中に「player.swf」ファイルを入れます。 |
|
これが「player.swf」です。 |
起動しない場合は、下記を確認して下さい。
IE6では、xml宣言が入っていると、起動できないようです
xml宣言をとるとデザインが崩れることがありますので微調整が必要になります。
languageがjaになっているときはhtmlをutf-8にしないと起動できいみたいです。
shift_jisで使いたい場合は、languageをenにしたらOKです。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css">
<script type="text/javascript" src="js/shadowbox/jquery.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "ja",
players: ["qt","flv","html","iframe","img","qt","swf","wmp"]
});
</script>
</head>
起動したいところに<div id=○○>を使っている場合は、起動しないことがありますので<div class=○○>に変えると起動します。
それでも分からない場合は、コチラまでメール下さい。
＊返信が遅れる場合があります。
浮気相手の着信を非通知方法