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

「jQuery.lightBox を画像ファイル以外にも対応させる」への15件のフィードバック

adrianne curry and chris knight 2013年1月7日 10:28 AM

I am not very excellent with English but I find this real leisurely to understand.

返信 ↓
TUBAKI 2010年11月10日 11:26 AM

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

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

をかもと 投稿作成者2008年1月12日 10:35 PM

自サイトのリンク(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で簡易表示させた際、そのページへのリンクがあると便利かと。

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

返信 ↓

匿名 2008年1月12日 4:17 AM

はじめまして。

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

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

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

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

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

返信 ↓
をかもと 投稿作成者2007年12月22日 10:11 PM

ちよこさん、どもです。

jQuery.lightpop.js として、画像フレームを表示できるようにしたモノを公開しましたので、そちらを試してみてもらっても良いですか？
デモはこちら

返信 ↓
ちよこ 2007年12月21日 1:17 AM

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

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

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

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

返信 ↓
をかもと 投稿作成者2007年12月20日 11:50 AM

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

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

返信 ↓
ちよこ 2007年12月20日 2:10 AM

はじめまして。

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

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

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

返信 ↓
をかもと 投稿作成者2007年12月13日 1:30 PM

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

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

返信 ↓
ゆきと 2007年12月10日 6:27 PM

まずは、結果報告です。

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

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

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

返信 ↓
をかもと 投稿作成者2007年12月8日 11:50 PM

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

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

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

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

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

返信 ↓
ゆきと 2007年12月8日 4:55 PM

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

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

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

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

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

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

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

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

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

返信 ↓
をかもと 投稿作成者2007年12月8日 12:29 AM

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

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

返信 ↓
ゆきと 2007年12月7日 8:06 PM

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

返信 ↓

コメントを残すコメントをキャンセル

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

dogmap.jp

独断と偏見の何でもレビュー。since Feb. 27, 2005

「jQuery.lightBox を画像ファイル以外にも対応させる」への15件のフィードバック

コメントを残すコメントをキャンセル

共有:

「jQuery.lightBox を画像ファイル以外にも対応させる」への15件のフィードバック

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル