lightbox plus機能が上手く作動しない!困っています。
- ホームページビルダー14で作成中のホームページで、lightbox plus機能が正常に作動しません。
- ダウンロードしたresourceファイルを写真ファイルにアップロードし、正しくhtmlに組み込んだのですが、拡大画像が別ページで開かれる問題が発生しています。
- ページ上で拡大画像が立ち上がり、クリックしても元のページに戻らず、ブラウザの戻るボタンを押す必要があります。解決策を教えてください。
- ベストアンサー
lightbox plus機能が上手く作動しません
lightbox plus機能が上手く作動せず、困っています。 ホームページビルダー14で、趣味のホームページを作っています。 「lightbox plus」機能を導入したく、all aboutの下記サイトを参考にしてダウンロードし、resourceファイルを写真ファイルにアップロードして、説明に沿ってhtmlを組み込んでみました。 all about のページ: http://allabout.co.jp/gm/gc/23975/ hard内に、下記をペーストしました。 <link rel="stylesheet" type="text/css" href="resource/lightbox.css" media="screen,tv"> <script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script> <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script> そして、拡大させたい画像は、以下の様にしました。 <a href="photo/goods/up1/1111.jpg" width="320" height="527" rel="lightbox"><img src="photo/goods/up/111.jpg" width="91" height="150"alt=""/></a> 上記の様に組み込んだら、元の小さな画像から、拡大画像を表示するまでは出来たのですが、どうしても拡大画像が別ページで立ち上がってしまいます。 また、別ページに立ち上がった画像をクリックしても、元のページには戻らず、ブラウザの戻るボタンを押さなければ戻りません。。。 ページ上で拡大画像が立ち上がり、画面をクリックすると元のページに戻る様に設定したいのですが、どうすれば良いのか分かりません。 ホームページ作りは始めたばかりなので、恥ずかしいほど素人です。 どなたかお解りの方がいらっしゃいましたら、お手数ですがよろしくお願いいたします。 専門用語は、只今勉強中なので、出来れば分かり易い言葉で教えて頂けると幸いです。 よろしくお願いいたします。
- heiko09
- お礼率90% (20/22)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
resource というフォルダの中に JavaScript のファイルが入っているので、フォルダごとアップロードします。 file と tiny フォルダはサンプル画像が入っているだけなので必要ありません。 位置関係の話ですが、sample フォルダの中に index.html ファイルと resource フォルダがありますよね。 その相対位置、つまりあなたが作成した html ファイルと同じ階層(フォルダ)に resource フォルダが必要であるということです。 このあたりは、all about に書いてあるので熟読してください。 一度、ダウンロードして解凍した sample フォルダをそのままアップロードしてアクセスして動作を確認してみてください。 大きな画像が白いページに表示されてしまうのは、JavaScript が正しく動作していない場合です。 例外として、他の JavaScript と干渉して動作しない場合もありますので、使用していたら止めてみてください。
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
まず、各ファイルの位置関係(ディレクトリ)がサンプルと異なっていると動作しません、この場合 js ファイルを修正する必要がありますから、サンプルと同じ位置関係にしたほうがわかりやすいです。 つぎに、正しい HTML を書いてください。 a 要素に width とか height はありません、また alt の前にスペースが必要です。 あと、ホームページ作成ソフトは勝手にソースを変えてしまう場合があるので注意してください。
お礼
早速のご回答、ありがとうございます! まず、 >a 要素に width とか height はありません、また alt の前にスペースが必要です。 ↑これは理解出来て、即実行しました。ありがとうございます! ですが、各ファイルの位置関係...と言うのが、イマイチ分かりません...すみません.... 分からないながらも、やってみた事は、lightbox plusをダウンロードして解凍すると、sampleというファイルが現れます。 この中には、『file』『resource』『tiny』というファイルと『index』が収納されています。 fileとtinyには、サンプル写真が収納されてありました。 これらの内の、index以外の3ファイルをコピーし、自分のサイトのファイルにペーストしてみました。 そして試しに、fileとtinyのファイル内にある写真を、自分のサイトに挿入してみたのですが、やはり拡大写真が別画面で立ち上がり、その画面をクリックしても、元に戻りません。。。 そして、私が作ったサイトのファイル内に、jsファイル(JavaScript?)が見当たらないのですが、それは必要な物ですか? トンチンカンな質問で申し訳ございません。。。 お時間があったら、ご対応を頂けると幸いです。 よろしくお願いします。
関連するQ&A
- 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
- 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の設置をしようとしているのですが、 サイトに書いてあるのと同じように、入力してみたのですが、 サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox2が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他(プログラミング・開発)
- 複数の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
- 教えてください! 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
- 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を表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックすると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は動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- ベストアンサー
- 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
- 複数スクリプトの読み込みで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
- jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のHTMLソースに足らない部分がありますか? ご教授ねがいます。 <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設置について教えてくださいませ。 アメブロにjQuery版のlightboxを設置したいと思い、下記の参考サイトさまの手順とおりに設定したのですが、画像がいつまでも読み込み中になりうまく表示されません。 http://ameblo.jp/new-bulue9/entry-10487238040.html 私が行った手順としては 1:jQuery lightBox plugin 0.5をダウンロードし、フォルダ名を「Lightboxj5」に変更したのちレンタルサーバーにアップロード。 2:下記プラグインの「ホームページのURL/」をレンタルサーバーのURLに書き換えて保存。 <!--■ jQuery Lightbox 5.0 ■--> <head> <link href="ホームページのURL/Lightboxj5/css/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" media="screen" /> <script src="ホームページのURL/Lightboxj5/js/jquery.js" type="text/javascript"></script> <script src="ホームページのURL/Lightboxj5/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('a[rel*=lightbox]').lightBox({ overlayBgColor:'#000009', overlayOpacity:0.6, imageLoading:'ホームページのURL/Lightboxj5/images/lightbox-ico-loading.gif', imageBtnClose:'ホームページのURL/Lightboxj5/images/lightbox-btn-close.gif', imageBtnPrev:'ホームページのURL/Lightboxj5/images/lightbox-btn-prev.gif', imageBtnNext:'ホームページのURL/Lightboxj5/images/lightbox-btn-next.gif', containerResizeSpeed:350, txtImage:'画像:', txtOf:'/' }); }); </script> </head> <!--■■■■■■■■■--> 3:「ブログを書く」段階で画像にで指示されたとおりrel="lightbox"を a タグの最後に記述。 <a href="http://stat.ameba.jp/user_images/20100221/22/new … rel="lightbox"><img src="http://stat.ameba.jp/user_images/20100221/22/new … /></a> 以上です。他のプラグインとバッティングしている可能性も考え他をすべて削除して起動してみましたが、これも駄目でした。 稚拙な文章でわかりつらいかとは思いますが何卒お知恵をお貸しくださいませ。
- ベストアンサー
- ブログ
お礼
何度も本当にありがとうございます。 index.html があるファイルに、resource フォルダをペーストしてあるのですが、やはり作動しません。。。 恐らく、outbraveさんのおっしゃる様に、JavaScript が正しく動作していない様に思います。 lightboxを導入することは、一般的にさほど難しいことではないのだと思いますが、今の私は、まだそのレベルに達していない様に思いました。 もう少し勉強をして、再度チャレンジしてみようと思います。 ご丁寧にご回答頂き、ありがとうございました。 本当に感謝です。 引き続きガンバリマス!