ホーム > タグ > lightbox

lightbox

Flash(swf)をlightbox風に表示させたい【IE6対応】【FancyBox】【jQuery】

商用でフラッシュ(swf)をライトボックス風に表示したくていろいろ見ていたのだが、
今回探すポイントとしては、
1. jQuery系プラグイン
2. 商用フリー
3. IE6対応

これが、なかなか見つからないのだ。
いろいろ探した結果報告。

shadowbox がよさそうなのだが、これは商用フリーではなく…

video lightbox これもよさそうだが、これまた商用フリーではなく…

そんなこんなでたどり着いたのが、、、

prettyphoto
ライセンス:Commons Attribution 2.5

おぉー。角丸でいい感じ。
商用でも使えそう♪
といろいろ試してみる。
いろいろ調整してみて、これならいけるかもーとちょっと喜んだのもつかの間、、、

IE6のこと忘れてた!!

チェックしてみると…
うぅぉぉー…表示がおかしい…。
だめか…
だめなのか…
もういやだ…
IEなんて大嫌い…
と、prettyphotoで結構時間を費やしてしまった…

なんか、はまるとすごく時間かかるよね。
気を取り直して翌日改めて探すことにする。

ってことで改めて探した結果、見つけたー!

その名もFancyBox
ライセンス:MIT and GPL licenses

るんるんるん♪

サンプルを参考にこんな感じで実装

<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#spot .movie").fancybox({
   'padding'   : 10,
   'autoScale'   : true,
   'transitionIn'  : 'none',
   'transitionOut'  : 'none',
   'titlePosition'  : 'outside',
   'width'  : '320',
   'height'  : '240',
   'overlayColor'  : '#000',
   'overlayOpacity' : 0.9
  });
 });
</script>
<ul id="spot">
  <li><a href="test1.swf" title="testmovie1" class="movie">動画1</a></li>
  <li><a href="test2.swf" title="testmovie2" class="movie">動画2</a></li>
</ul>

cssの置き場所とかを変えるときはパスも合わせて変更する。

今回、動画の外に余白を入れたかったので、
‘padding’ : 10
を設定。

また、タイトルの表示は、
‘titlePosition’は’outside’にした。
この際の表示位置はどうやらそのページのスタイルにつられているようなので、
強制的に中央ぞろえにしたければスタイルを上書きして

.fancybox-title-outside {
 text-align: center;
}

とすればよい。

また、暗めにしたかったので
‘overlayColor’ : ‘#000′
‘overlayOpacity : 0.8
を設定。標準設定は
overlayColor : ‘#777′
overlayOpacity : 0.7

このように追加する場合は「,」を忘れないように、かつ最後に「,」をつけないようにする。
これは、ちゃんとIE6でも大丈夫!!

やったー!

と思いきや、コンテンツを既存ページに組み込むと、別のフラッシュも一緒に表示されるじゃないか…。
なんとなく記憶をたどって意外とすんなり解決。

解決方法
param name=’wmode’がvalue=’transparent’になっているかチェックし、なっていなければ設定する。

これで、無事解決!

ありがとうFancyBox!!

と思いきや、IE6だと閉じるボタンが見えない…
どうやらIE8でも。

ヌォーー…

ちょこちょこした結果、下記で解決できました。

【IE6-IE8】FancyBoxでクローズボタン(閉じるボタン)などが表示されない場合の解決方法!

jquery.fancybox-1.3.4.css
/* IE6 */以下の画像パスをルートからのパスに修正する!!


/js/fancybox/fancy_close.png に画像がある場合、

fancybox/fancy_close.png

js/fancybox/fancy_close.png

こんなかんじ。これで表示されるはず!

ふぅー解決できてよかったー。

Home > タグ > lightbox

want

Return to page top