- 締切済み
shadowboxについて
こんばんわ。 以前こちらでshadowbox使用の際のライブラリについて質問させて頂き、 お陰で設置する事が出来ました。ありがとうございます。 さて本題なのですが・・・。 iframeの中からshadowboxを使うと、中のフレーム内だけに画像が表示されてしまいます。 これをフレームの外に画像を表示させたいのです。（呼び出す感じですかね？） http://www.shadowbox-js.com/faq.html リンク先におそらく同じであろう質問と回答がありました。（自信はありませんが；） 翻訳して言いたい事は何となくわかるような気もするのですが、 正直javascriptに関する知識があまり無いので、自分の記述ミスが原因だと思います。 lightboxでは無理と聞いた事があるので、もしかしたら出来ないかもしれませんが・・・。 お力をお借りしたく質問いたしました。宜しくお願いします。
- stnfy
- お礼率100% (9/9)
- JavaScript
- 回答数6
- ありがとう数12
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
- yyr446
- ベストアンサー率65% (870/1330)
親と子のhtmlソースを表示させて、意味を良く考えてください。 shadowboxを親に出したり、子に出したりしてます。 説明がへたなので見た方が早いと思います。
お礼
回答ありがとうございます。 お手数をおかけして申し訳ありません・・・。。。 わ、わざわざページまで作って頂いて・・・！！ 何てお礼を言っていいのか・・・ありがとうございます。 ただ、まことに申し訳ないのですが、ページを拝見した所、エラーが出てしまっていて自分には見る事が出来ませんでした。 （「子に表示」をクリックすると真っ白い画面が出て、「親に表示」だとエラーになります；） せっかく作って頂いたのに本当に申し訳ないです・・・。 ですが、ソースに関しては勉強させて頂きますね。本当にありがとうございます。
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 FAQの内容を理解されていないようですね。 No1のお礼を読むと、iframeでもshadowboxを読み込んでいるようですが、iframe「内」で表示するように使う必要がないのであれば（ご質問文だとそれで困っているようなので、多分無いと思いますが）、まず、iframeのHTMLでshadowboxを読込むのは、ひとまずやめておきましょう。 実際には、読込んでも問題はないのですが、今回の誤解と問題はそこにありそうなので… 例えば、両方で使用するなら、使い分けるために var Shadowbox = window.parent.Shadowbox; などとはしないでしょうし…（これだと上書きされてしまう） 一方で、親のHTMLにはshadowboxの読込みが必要です。（必須です。） その状態で、（エラーにならずに）shadowboxを機能するようにできれば、お望みの表示ができるはずです。 現状は、iframe側で読込んでいるshadowboxが動作していて、親のほうのスクリプトの呼出しに成功していない（質問者様がちゃんと呼出していないと推測されます）ので、ご質問のような状態になっていると思われます。（子側の読込みをやめておけば、親側を呼出せないとエラーになります。） 現在の処理内容を、親側のshadowboxで行えば、お望みの結果が得られるはずです。（・・・ということがFAQに書いてあります。） またNo1にも書きましたが、もしも、要素の受け渡しがある場合（機能をよく知らないので不明ですが）は、子側の要素を親側に受け渡すことになりますので（位置関係に）注意が必要です。 No2様が、実際にテストしてくださっていますので、その内容をよく読んで、意味を理解してください。
お礼
何度も回答ありがとうございます。 お手数をおかけして申し訳ありません・・・。 親にshadowboxが必須というのは確かに親から起動させるわけですからそうなりますよね。 実は、知識がないなりに色々試したんです（苦笑） 最初はこれで起動できる！と思っていたので、お礼にて書いた内容をiframeページに記述したらエラーは出なかったのですが、悩んでいる通り、親ページにしかshadowboxが表示されませんでした。（正常に起動） どうしたものかと思い、子（iframeページ）にshadowboxの記述を一切せず、親に var Shadowbox = window.parent.Shadowbox; // do whatever you want with Shadowbox here を記述したらエラーが出て普通のリンク機能（真っ白なページに画像が呼び出される状態・・・直リン？）にしかなりませんでした。 勿論、この時shadowboxの記述もしてあります。 位置関係というのは、shadowboxが表示される際の位置関係という事でしょうか・・・？ 何だかこのあたりに原因があるかもです・・・調べてみますね。 Shift_JISでは"ja"ではエラーになって"en"にしたら解決したように、何か他に問題でもあるのでしょうか・・・。 明らかに自分の記述ミスがいけないと思っていただけに余計に混乱です（汗） もう一度FAQの意味を頑張って理解しようと思います！
- yyr446
- ベストアンサー率65% (870/1330)
yyr446です。 お礼の内容を見たところ、十分理解されてないですね。 shadowboxのライブラリー（JSファイル）とCSSをロードしているのは、 親ページですよね。従ってプログラムは全て親ページにあります。Shadowboxのプログラムは親ページで全部動きます。 初期化も親ページで行います。初期化で何をやっているかまでは知る必要は無いですが、初期化は必要だとマニュアルに書かれています。 iframe内のhtmlドキュメントからは、親の機能を使わせてもらう事になります。Shadowboxという名前のオブジェクトがShadowboxのいろいろな機能を持っていると思ってください。 つまり、iframe内のhtmlドキュメントのscriptで、 var Shadowbox = window.parent.Shadowbox; と書いて、親のShadowboxオブジェクトを参照可能にしているわけです。 だから、 Shadowbox.init({ var Shadowbox = window.parent.Shadowbox; // do whatever you want with Shadowbox here language:"en", players:["img"] }); </script> の書き方は思いっきり間違っています。 それから、もしやと思いますが、iframe内のhtmlドキュメントのタグでrel="shadowbox;options={ｘｘ:ｘｘ}"の記述をしても、 おそらくうまくいかないですよ。 子からshadowboxを使うときは、javascriptで親の機能をつかうようにしないとだめだと思います。
お礼
回答ありがとうございます。 えっと・・・すみません。自分の言い方が悪かったかもしれません。 もしくは、自分自身がyyr446さんの仰っている事を理解出来ていないのかもしれません。 ページのデザインで言いますと、iframeを使用して、フレーム内に呼び出されたページに画像リンクが貼ってあり、そこからshadowboxを起動させるといった具合です。 ですが、通常通りの記述ですとその呼び出されたフレーム内のページにのみ画像が展開され、ものすごく小さな表示になってしまうのです。 それを、フレーム内だけでなくページ全体に通常通りに表示させたいのです。 FAQにもあった通りiframeのページの先端に記述する・・・など書いてあったので（翻訳が曖昧で不安ですが）先程記述したような内容でやったところ、実行されませんでした。 勿論、rel="shadowbox;options={ｘｘ:ｘｘ}"はフレーム内に呼び出されるページに記述してあります。 shadowbox.JSとCSSをロードしているのは親ページとの事なので、この場合は親（フレーム内に呼び出されたページ）から子（iframeを指定してあるページ）にshadowboxを使うといった感じですかね・・・？ 言ってる事全然違うかもしれません・・・すみません（汗）
- yyr446
- ベストアンサー率65% (870/1330)
shadowboxのどの機能を使われているのかわかりませんが、 親HTMLで、 <iframe name="hoge" src="./hoge.htm" height="480" width="640"></iframe> 親の<script>で Shadowbox.init({ language: "ja" }); は必要です。 iframeのHTML内の<script>で、 var Shadowbox = window.parent.Shadowbox; Shadowbox.open({ content: './fuga.img', player: "img", title: "fuga", height: 600, width: 800 }); としたら、640×480のiframe領域をはみ出して800×600の画像がちゃんと 表示されます。 質問の意味がちがいますか？
お礼
回答ありがとうございます。 申し訳ありません。 yyr446さんの書かれた通りやってみたのですが、相変わらずフレーム内だけに表示されます。 javascriptの知識があまり無いのでお聞きしたいのですが、 FAQにあった var Shadowbox = window.parent.Shadowbox; // do whatever you want with Shadowbox here の記述ではなく、何故回答して下さったような記述が必要なのでしょうか・・・？ FAQにあるのは、例えばの記述の仕方って事でしょうか。 色々なやり方があるんですかねぇ。。 ちなみにですが機能は画像（img）を使います。ありがとうございます。
- fujillin
- ベストアンサー率61% (1594/2576)
shadowboxはまったく知りませんが… ご提示のFAQの通りでよいのでは？ 親のHTMLにshadowboxを読み込んでおいて、iframeからは最初に var Shadowbox = window.parent.Shadowbox; としておけば、後は、通常と同じ使い方をすることで、親のほうのスクリプトが実行されるはずですけれど…？ 初期設定などがある場合は、当然、それも実行しておかなければなりません。（位置関係だけは注意する必要があるかも…）
お礼
回答ありがとうございます。 そうなんですよね・・・FAQの通りに記述したんですが全くの無反応で（汗） 無反応というか、相変わらずフレーム内だけに小さく表示されてしまって・・・。 ちなみにiframeのHTMLには、 <link rel="stylesheet" type="text/css" href="***/shadowbox.css"> <script type="text/javascript" src="***/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ var Shadowbox = window.parent.Shadowbox; // do whatever you want with Shadowbox here language:"en", players:["img"] }); </script> このようにしました。 "ja"ではなく"en"にしてあるのは、shift_jisにしていると上手く起動しないらしいのです。実際そうでした・・・。 申し訳ありませんが初期設定とは何でしょうか・・・？すみません！ 書き忘れましたが、shadowboxのバージョンは3.0bです。
関連するQ&A
- shadowbox について
最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。
- 締切済み
- JavaScript
- iframe内のshadowbox プレイヤー位置
こんばんわ。 iframe内でshadowboxを使って動画を再生しようと考えています。 iframeはheight1000px位の縦長です。iframe内の画像をクリックするとshadowboxが機能し、動作はするのですがプレイヤーの位置がフレーム中央に表示されロールしないと見れません。 ページの中央にプレイヤーが配置されるようにわざわざプログラミングされているのは理解できますが、なんとかこのプレイヤーの位置を調整できないものでしょうか。できればiframeページの上部に配置したいのです。 cssでやってもうまくいかず、javascriptも詳しくなく、shadow.jsのソースを見てもわかりません。 もしご存知の方がいらっしゃればお手数ですが、宜しくお願いします。
- ベストアンサー
- JavaScript
- shadowbox3.0.3で画像が開きません
環境 Mac OSX DreamweaverCS5.5 上記環境でサイト制作しまして、Dwの"ブラウザでプレビュー"の使用してSafariとFirefoxで問題なく動作、表示する事を確認した後、FC2ホームページにアップロードしたところshadowbox.jsが動作せずに困っております。 具体的には <a href="image/image01.JPG" rel="shadowbox"><img src="image/image01_thumb.jpg"></a> とゆうコードでサムネイル画像をクリックして拡大表示したいのですが、クリックするとブラウザが暗転し"Loading"の文字とアニメーションが表示されますが、そこから進まず画像が表示出来ません。 またshadowboxの.jsファイルと.cssファイルを読み込む記述は以下のようになってます <link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" /> <script type="text/javascript" src="js/shadowbox/shadowbox.js"> </script> <script type="text/javascript"> Shadowbox.init({ language: 'ja', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script> これまでshadowboxに関するブログや質問など見てみましたが、特にコードの記述には問題が無さそうに思い、どこに問題があるのか全く分からなくなってしまいました。 これにはどのような問題が考えられるでしょうか？ 初歩的な質問だとは思いますがよろしくお願いし致します。
- ベストアンサー
- CSS
- shadowbox.jsについて
shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>
- ベストアンサー
- CSS
- Shadowboxを使い方が分からない
下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js (floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img (表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************
- ベストアンサー
- HTML
- Shadowbox.jx3.0.3が動かない。
初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、 公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。 色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。 何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。 以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="1.jpg" rel="shadowbox" title="My Image">My Image</a> </body> </html> ※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。 jqueryもDLして、ヘッダ部分に <script type="text/javascript" src="/jquery-1.5.1.min.js"></script> という一文も入れてみましたが全く動かない状態です。 説明足らずな点も多いと思いますが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- fc2blogでshadowboxを使用したいと思い
fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 参考サイトを順に追っていきますと 最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css 以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。 ○○○○にはアップロード先のURLが入ります。 {background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;} {background-image:url(http://○○○○/close.png);} {background-image:url(http://○○○○/next.png);} {background-image:url(http://○○○○/previous.png);} {background-image:url(http://○○○○/play.png);} {background-image:url(http://○○○○/pause.png);} 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> を貼り付けて更新ボタンを押して、新しく記事を書くで <a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。
- ベストアンサー
- JavaScript
- 画像拡大機能のjsをスマホで読み込まない
ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- fc2blogでshadowboxを使用したいと思い
fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 間違いを見つけようと、参考の記事を確認しながら、三回程間違いを探してみましたが、私の中では間違いを見つけられませんでした。 この辺を確認したら良いなどのアドバイスや参考ブログで気づいた事がありあしたら、回答宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 おお、ちゃんと起動しました！ 確かにそういう事書いてありましたね～。 自分もそこ注意した記憶があります。 まぁ最初からTransitionalでやってたんで大丈夫でしたが・・・。 URL付きで標準モードにしないとダメって事なんでしょうね。 改めてソース参考にさせて頂きますね。 わざわざありがとうございました！