shadowbox設置

今までthickboxを使っていましたが、動画にも対応できるshadowboxへ変更しました。

Movable Typeでの設置は、以下のような手順でできます。

shadowboxのサイトからダウンロードし、圧縮ファイルを解凍します。

cssファイルで指定している画像へのリンクを修正し、サーバーへアップロードします。

HTMLヘッダーテンプレートに下記を追加します。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
 language: 'ja',
 autoplayMovies: false,
 players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
 });
</script>

cssとjsファイルのURLは、アップロードした場所にあわせて修正します。

autoplayMoviesは、動画の自動再生の設定で、デフォルトではtrueになっています。

画像のaタグにrel="shadowbox"を追加すれば、期待通りの動きになるはずです。

私の場合、thickboxを使用していたため、class="thickbox"のタグを検索、置き換えで修正をしました。

動画の場合、ヘッダーでサイズ指定をすれば良いはずですが、何故か指定サイズで表示されなかったので、rel="shadowbox;height=400;width=600"というように、プレイヤーの大きさを指定しています。

youtubeの動画にも対応できるようですが、うまくいかないので追々対策を考えます。

zenbackとshadowboxが共存している場合、IEで画像をクリックして表示させると、フッターの下にリンク切れの画像？ファイルが表示されます。am6.jpというtwitterに関するサービス？にアクセスしようとしている？。

コメントする