インラインフレームを使用したlightboxの表示方法
- メインページ上にインラインフレームを使用して、写真のサムネイルを並べていますが、サムネイルをクリックしてもlightboxが表示されません。
- メインのHTML（main.html）のheadに必要なスタイルシートとスクリプトを読み込み、インラインフレーム内（in.html）のサムネイルにもlightboxの設定を行っていますが、表示されません。
- 上記のタグをメインのHTMLに記述すると正常に動作するため、ソースのどの部分に手を加えればインラインフレーム内でも表示されるか教えてください。
- ベストアンサー
インラインフレームを使って、lightboxを表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- akoblue
- お礼率67% (96/142)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
in.html内のbase targetで指定するか、アンカーにターゲット属性でmain.htmlに出力させてば良いのでは？ <base target="main.html"> 又は<a href="" target="main.html">
関連するQ&A
- 教えてください! lightboxとskitter
javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>
- ベストアンサー
- JavaScript
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>
- ベストアンサー
- JavaScript
- Lightboxで「ファイルが見つからない」のエラーが出ます
サイズの異なる複数の画像を実寸で表示したくて、Lightboxを使おうとしているのですが、この設定でどこが悪いのか分かりません。 テキストリンクの「コーヒーブレイク」をクリックすると、 --------------------- ファイルが見つかりません。 “/Volumes/backUP/image/g1/coffeebreak.jpg rel=”にファイルがありません。 --------------------- どなたか教えてください。 □ファイルの場所： backup/Webフォルダ下にhtmlファイルとlightboxのcss,js,imagesの各フォルダがあります。 使用する画像は、 backup/image/g1フォルダ下にあります。 □表示するhtmlファイルにはこのように記述してあります。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_jis"> <META name="robots" content="none"> <title> ここにタイトルが入ります。 </title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <a href="../image/g1/coffeebreak.jpg rel="lightbox">コーヒーブレイク</a> </body> </html>
- ベストアンサー
- HTML
- Lightboxがエラーになります。
一応、下記のようにタグを書き込むとローカルでは動くようになったのですが、 サーバーにupすると『ページでエラーが発生しました』となり 実行エラーがでます。 <head>～</head>内に、 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css"> <body>に <a href="images/xxx_1.jpg" rel="lightbox"><img src="images/xxx_2.gif" width="199" height="85"></a> です。 特に指示がなかったので、 FFFTPで普通にupしました。 パーミッションとか変更しなければならないのでしょうか。 尚、バージョンは設置の参考にしたサイト様がlightbox2.03だったので、lightbox2.03を使いました。 何か、最初の行が、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> でなければ、サイトのテンプレートデザインが狂ってしまうのです。 最新のバージョンだと、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> なので使えませんでした。 参考にしたサイト様は http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html です。 どうしてこんな現象が起きるのか、どなたか教えて頂けないでしょうか。
- ベストアンサー
- JavaScript
- jQery lightboxをmapタグ内で使うに
jQery lightboxをmapタグ内で使う事は出来るでしょうか。 meta内は、 <script src="/jquery/lightbox/jquery.lightbox-0.5.js" type="text/javascript"></script> <script src="/jquery/lightbox/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script src="/jquery/lightbox/jquery.lightbox-0.5.pack.js" type="text/javascript"></script> <link href="/jquery/lightbox/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="all" /> として、以下のようなhtmlを記述したのですが 動きませんでした。 問題点はどこにあるのでしょうか。 ご教授いただけますと幸いです。 <div id="gallery"> <map name="Map" id="Map"> <area rel="lightbox" href="/aaa.jpg" $('#gallery a').lightBox();" target="_blank" shape="rect" coords="77,266,98,286" /> <area shape="rect" coords="121,299,138,317" href="#" /> <area shape="rect" coords="149,305,171,325" href="#" /> </map> </div>
- ベストアンサー
- 画像・動画・音楽編集
- lightboxの設置
<html lang="ja"> <head> <link href="css/lightbox.css" rel="stylesheet" media="all" type="text/css" /> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <title></title> </head> <body><a href="img/bb123.jpg" data-lightbox="group" data-title="S001"><img src="img/bb123.jpg" alt="" width="256" /></a> <script src="css/lightbox.js" type="text/javascript"></script> <script> lightbox.option({ 'fitImagesInViewport' : true, 'wrapAround': false }) </script> </body> </html> とりあえずテストで、lightbox2の設置をしようとしているのですが、 サイトに書いてあるのと同じように、入力してみたのですが、 サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox２が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
- map とlightbox
以下のようにグーグルマップのように地図上のマークをクリックするとlightboxで画像がでるように したんですが機能しません。この組み合わせはだめなのでしょうか？ 或いは他の方法があるんでしょうか？ 出来ればマークを触れると画像がポップアップする方がいいのですが。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <div><img src="images/map.png" alt="" usemap="#map" border="0"/></div> <div id="gallery"> <map name="map"> <area href="images/jtb.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" /> </map> </div>
- ベストアンサー
- JavaScript
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- light boxが上手く表示されない
はじめまして。 ホームページ作成初心者の者です。 今独学でホームページを作成してまして写真をlightboxを使って表示させたいのですが上手く拡大されず、そのままのサイズで中途半端に表示されます。 HTML内の<head>～</head>タグ内の記述は以下になります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css"/> <title>写真ギャラリー</title> </head> 以下1部省略 <div id="gallery-boxA"> <p> <a href="images/ナゴラン.jpg"rel="lightbox" title="ナゴラン"><img src="images/ナゴラン.jpg" width="200" height="180" /></a> <a href="images/ケイタイオウフウラン.jpg"rel="lightbox" title="ケイタイオウフウラン"><img src="images/ケイタイオウフウラン.jpg" width="200" height="180" /></a> <a href="images/サガリラン.jpg"rel="lightbox" title="サガリラン"><img src="images/サガリラン.jpg" width="200" height="180" /></a> </p> </div>になります。 初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。 上手く拡大表示するにはどうしたらいいのでしょうか？ 何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。 よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
お礼
お礼が遅くなってすみません！ 教えて頂いた方法で、無事解決いたしました。とても助かりました。本当にありがとうございます。