jQuery.lightBox を画像ファイル以外にも対応させる

サムネイル画像の拡大表示をすることのできる jQuery プラグイン jQuery lightBox plugin を画像ファイル以外にも対応させてみたので、自分用にメモ。

YouTube 対応させたデモは、こんな感じ。
オヤジの心に灯った小さな火 – 里田まい with 藤岡藤巻
息子よ – 藤岡藤巻

動画ファイルのデモは、こんな感じ。
海空中ワイドスターマイン
ツバメ子育て


追記:2007/12/22
jQuery.lightpop.js として、この改造と同等のことができる jQuery 用プラグインを公開しました。
デモはこちら

また、あわせて WordPress で、簡単にこのスクリプトを利用できるようにする WordPress 用プラグイン WP-lightpop も公開しています。
そちらもどうぞ。

15 thoughts on “jQuery.lightBox を画像ファイル以外にも対応させる

  1. TUBAKI

    素晴らしいです。動作がとても軽いのがGoodです。
    ありがとうございました。
    お礼かたがた、ずうずうしくも要望がありまして、コメントさせて頂きました。
    できれば、pdfファイルにも対応していただけると、とても嬉しいです。
    バージョンアップのときにご検討頂ければと思います。

    返信
  2. ピンバック: LightBox風に iframe を表示 | メシウマ状態 飯の旨いおかずがてんこ盛り

  3. をかもと 投稿作成者

    自サイトのリンク(sjis)をlightpopで表示させた際文字化けしてしまいます。
    ajaxでページデータを取得しているためかと思いますが、iframeも検討してみてはいかがでしょうか??

    うーん、iframe って好きじゃないんですよね。
    どうしてもと言うことであれば、fileTypes 配列の一番最後を

     ,{
       type: 'Contents'
      ,match: function(strUrl){return true;}
      ,set: function(contentNo){
        var arrSizes = get_sizes_from_str(contentInfo[contentNo].href);
        strSrc = '<iframe width="' + arrSizes[0] + '" height="' + arrSizes[1] + '" src="' + contentInfo[contentNo].href + '" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="' + contentInfo[contentNo].href + '">' + contentInfo[contentNo].tytle + '</a></iframe>';
        contentInfo[contentNo] = jQuery.extend(contentInfo[contentNo], {content:strSrc, width:arrSizes[0], height:arrSizes[1], later:500});
        set_content_to_view(contentNo);
       }
      ,preload: function(contentNo){
        var arrSizes = get_sizes_from_str(contentInfo[contentNo].href);
        strSrc = '<iframe width="' + arrSizes[0] + '" height="' + arrSizes[1] + '" src="' + contentInfo[contentNo].href + '" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="' + contentInfo[contentNo].href + '">' + contentInfo[contentNo].tytle + '</a></iframe>';
        contentInfo[contentNo] = jQuery.extend(contentInfo[contentNo], {content:strSrc, width:arrSizes[0], height:arrSizes[1], later:500});
       }
      }

    って感じに変えれば、iframe で表示できるはずです。

    ページリンクをlightpopで簡易表示させた際、そのページへのリンクがあると便利かと。

    あっ、これは良いですね。
    あると便利かも、参考にさせていただきます。

    返信
  4. 匿名

    はじめまして。

    jQuery.lightpop.jsを使わせていただきました。
    すばらしいカスタマイズに感銘を受けております。

    早速自サイトに設置させていただきました。
    そのときに気づいたことが数点ありましたのでコメントさせていただきます。

    自サイトのリンク(sjis)をlightpopで表示させた際文字化けしてしまいます。
    ajaxでページデータを取得しているためかと思いますが、iframeも検討してみてはいかがでしょうか??
    CSS有効になりますし、他サイトでもいけますし。。

    また細かいことですが、ページリンクをlightpopで簡易表示させた際、そのページへのリンクがあると便利かと。
    さらに、スライドショー機能もつくと完璧かも。

    以上、自分でも挑戦してみるつもりですがとりあえず寄稿させていただきました。
    これからもよいものを作ることを期待しています!がんばってください!

    返信
  5. ちよこ

    をかもとさん、お返事ありがとうございます^^/

    早速色々試して、それらしい感じにはできました。
    背景に画像を配置して、paddingで見せる画像の枠の幅を調整するという感じです。
    ただ、写真サイズもイラストフレームもサイズが全て同じなので、
    リサイズアニメーションを停止しようと、奮闘中です・・・。

    またお時間のあるときに、かもとさんのTipsをエントリしていただければ、嬉しいです。

    毎日覗いていますので、是非是非詳細エントリ期待しております^^;;

    返信
  6. をかもと 投稿作成者

    ちよこさん、はじめまして。

    126 行目で apend しているHTML文を修正して CSS を修正すれば、できると思います。
    CSS でボックスを表現する方法は、この辺が参考になるかと。
    そのうち、詳細をエントリするかも。

    返信
  7. ちよこ

    はじめまして。

    素晴らしいカスタマイズですね!^^/
    早速挑戦させていただいています。

    そこで、さらに欲張って、このLightBoxの通常の白枠を、
    自分でデザインした枠(イラスト)にカスタムに挑戦しているのですが、
    そんなことは、できたりするのでしょうか。
    ※普段イラストを描いているので、かわいいフォトフレームをデザインして、
    その中で写真や動画をコントロールしたいなと思ってます・・。

    せっかくこんなに高機能なLightboxを
    さらに見た目も自分でコントロールできればと思い、
    をかもとさんが、もしご存知でしたら、
    教えていただければ幸いです。

    返信
  8. をかもと 投稿作成者

    ゆきとさん、どもです。
    動作報告ありがとうございました m(_ _)m

    この改造版のプラグインは結構気に入っているので、そのうち全面書き換えして公開できるようにしたいと思います。

    返信
  9. ゆきと

    まずは、結果報告です。

    画像・YouTubeは、今まで通り問題ありません。
    動画は、IE・FF共に「グルグル」が一瞬見え、ページに飛ばされてしまいます。
    その他は、IE・FF共に問題なく表示されます。

    実は、ここに紹介した以外に他にも多々手を入れてあるので、それ絡みで上手く動かないのかも。

    この関係もしているのかもしれませんので、メールにてご連絡しますね。

    返信
  10. をかもと 投稿作成者

    ゆきとさん、どもです。
    どうも、URLから width, height を切り出すのがうまくいってなかったようです。
    これでどうでしょうか?

    WordPress上でないとうまくいかないのかと思いはじめております。

    いや、WordPress は関係なく動作するはずです。

    あと、本文には書いてありませんが、_finish() 関数の1行目に
    $('embed, object', $('#jquery-lightbox')).remove();
    を追記しておくと幸せかも。

    実は、ここに紹介した以外に他にも多々手を入れてあるので、それ絡みで上手く動かないのかも。
    jquery.lightbox.js はライセンス的に改変したソースの配布を認めてないようなので公開はできませんが、Aboutに書いてあるをかもとの連絡先まで、メールいただければ、何とかなるかも。

    返信
  11. ゆきと

    早速対応していただきありがとうございます。

    すぐに変更してテストしてみました。あれ?動かない…
    206行目の最後に , 追加と、208行目の最後の , を取ったら動きました(^^;

    WinのIE6とFirefox2で確認したところ以下のような結果になりました。

    画像  IE○ FF○
    youtube IE○ FF○
    動画  IE△ FF○
    その他 IE△ FF△

    動画はFFでは問題なかったですが、IEでは動画の左下1/4がブラウザの左上に
    表示して…closeしても動画動きぱなしと、よく分からない事になっていました。
    その他に関しては、width, height 指定無ではIEは表示できず、FFは横幅が
    取得できないのか画面はOKですが、closeのところがブラウザ横幅いっぱいに
    なりました。
    width, heightを指定すれば、多少closeのところにスクロールバーが出ますが、
    気にならない程度なので問題ないと思います。

    そこで今度こそ、僕でも直せるかなとソースを見させていただいて試してみましたが、
    うまくいきませんでした。とほほ…

    そこでソースをみていて思ったのですが、WordPress上でないとうまくいかないのかと
    思いはじめております。
    (すみません、最初に環境[通常のページ]をお伝えすればよかったですね)

    僕が思うに横幅と縦幅がうまく取得できれば、その他のパターンで動画も
    再生できるのはないのかなと思います。

    無理そうであれば、別の手段を考えてみます。
    ※ご無理を言って申し訳ありませんm(_ _)m

    返信
  12. をかもと 投稿作成者

    ゆきとさん、はじめまして。

    本文に各種動画ファイルへの対応を追記しました。
    多分、これでおっけのはずなので試してみてください。
    動画ファイルのサイズは hogehoge.flv?width=320&height=240 のように width, height 指定するようにしてありますので、そこだけ注意すれば多分大丈夫だと思います。

    返信
  13. ゆきと

    こんにちわ&はじめましてm(_ _)m
    jQuery lightBox pluginで、Youtube等も表示できるものないかなぁ〜と
    ググってたところ、ここにたどり着き早速テスト利用させてもらいました。
    画像もOK。YoutubeもOK。
    よしっと思って、flvplayer.swfを利用したページの表示に挑戦したところ
    読み込みの「グルグル」は出るのですがそこから進みません。
    自分の作ったページがおかしいのかなと思い、こちらにある「videopop.php」を
    お借りして動かしてみましたが、やはり同じ状態になりました。
    自分なりにソースを確認しましたが、よく分かりませんでした(^^;
    すみませんが、助けていただけると助かります。

    返信

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください