lightbox2.04の修正方法
- JavaScriptを使用しているlightbox2.04を導入した際に、サイトのCSSのレイアウトが崩れる問題が発生しました。
- サイトはテンプレートを使用しており、CSSを纏めるなど試みましたが、レイアウトが更に崩れてしまいました。
- 対応策としては、lightboxのCSSを手直しすることが考えられますが、具体的な変更方法が分かりません。
- ベストアンサー
lightbox2.04の修正について
こんにちは。 どこで質問すればいいのか迷ったのですが、JavaScriptを使用しているみたいなので こちらに書き込ませて頂きました。 先日自サイトで利用したいと思い、『lightbox2.04』をDLしました。 設置方法も簡単だということで、導入は何とか出来たのですが、 その際に自サイトのCSSのレイアウトが崩れてしまうのです。 （たとえば文字サイズやフォントなど） サイト自体はテンプレートを使っておりまして、細かい内容などはよく分かりません。 それでもCSSを一つに纏めるなどしてみたのですが、更にレイアウトが崩れてしまい、 お手上げでした。 出来ましたら、lightboxのほうのCSSを手直しするなどして対応できれば、と思っていますが、 どこをどう変えればいいのかわかりません。 因みに設置の際参考にしたのは下記のページです。 http://www.chamanet.com/lightbox/ とても初心者で申し訳ありませんが、ご指導頂ければ助かります。 補足が必要な場合は、仰って頂ければ対応いたします。 お手数おかけしますが、何卒よろしくお願いいたします。
- silver_kei
- お礼率100% (11/11)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
lightboxを設置しただけ（利用しない状態）で、表示が乱れるのでしょうか？ ご質問文からだけではわかりかねますが、とりあえずありそうなのが、idのダブリでしょうか？ 「lightbox.css」で使用しているidを、そのつもりでなく使用していることはありませんか？（例えば、id="lightbox"やid="imageData"とか） （lightbox.cssはテキストファイルなので、エディタで開けます。そこで 定義されているものを、意図せずに使用していないでしょうか？ 数は限られているので、たいした手間でなくチェック可能でしょう。） てっとり早くチェックするなら、lightbox.cssを読み込んでいるlinkタグをはずしてみて、正しく表示されるようであれば、↑が原因の可能性が高いです。 ＞lightboxのほうのCSSを手直しするなどして対応できれば、～～ lightboxのCSSを変更すると、関係する部分をスクリプトから探し出して、全部修正するという大変な作業になりますので、やめたほうが良いと思います。（そうしないと、lightboxが誤作動することになります）
関連するQ&A
- 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の設置
<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は、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
- lightboxがなぜ嫌われるか
はじめまして。 自分はデザイン系の学生で、ポートフォリオサイトを持っています。このたび作品紹介のページのデザインを更新するにあたって、lightboxの導入を考えています。 ちなみに使用を考えているサンプルスクリプトは以下です。 http://www.dolem.com/lytebox/ しかし、ネット上で調べてみると「lightboxを多用してるのが嫌でページ訪問をやめた」など、lightboxを嫌ってる人がある程度いるようです。雰囲気としてはFlashのみで構築されたページ（しかもページ移動などが考慮されていない）を毛嫌いするのと同じように自分は感じたのですが、どうしてlightboxが嫌がられるのかいまいちわかりません。 自分は今までlightboxを使ったサイトを見てきましたが、特にストレスを感じたことも無いのです（とはいえ、プロがデザインしたものがほとんどですが）。 なぜ自分がLightboxを使うかというと、作品写真のサムネイルを並べ、それをLightboxで表示する、という方法を使いたいからです。サムネイルはページに１０枚以内。サムネイルページには極力少ない文字情報でプロジェクト等の情報を掲載し、あとはスライドショー形式でLightboxを使いたいのです。レイアウト上、サムネイルとメイン画像を同時に表示するスペースは確保しずらいです。なので別窓ではないけどオーバーレイで元のレイアウトを無視して大きく画像を表示できるLightboxは適当な解決策なのです。 ちなみにページレイアウトは、[TOP]-[作品一覧]-[個々の作品のサムネイル] となる予定です。 lightboxが嫌われる理由、ご存知の方教えていただけますでしょうか。
- ベストアンサー
- その他（カメラ・ビデオカメラ）
- 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
- 複数の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設置について
アメブロでのlightbox設置について教えてくださいませ。 アメブロにjQuery版のlightboxを設置したいと思い、下記の参考サイトさまの手順とおりに設定したのですが、画像がいつまでも読み込み中になりうまく表示されません。 http://ameblo.jp/new-bulue9/entry-10487238040.html 私が行った手順としては １：jQuery lightBox plugin 0.5をダウンロードし、フォルダ名を「Lightboxj5」に変更したのちレンタルサーバーにアップロード。 ２：下記プラグインの「ホームページの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> <!--■■■■■■■■■--> ３：「ブログを書く」段階で画像にで指示されたとおり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> 以上です。他のプラグインとバッティングしている可能性も考え他をすべて削除して起動してみましたが、これも駄目でした。 稚拙な文章でわかりつらいかとは思いますが何卒お知恵をお貸しくださいませ。
- ベストアンサー
- ブログ
- jquery lightboxが作動しません
ホームページビルダー14で、趣味のホームページを作っています。 jquery lightbox0.5を下記サイトからダウンロードし、アップロードしてＨＴＭＬを組み込みました。 ダウンロードしたjquery lightbox0.5のサイトＵＲＬ http://www.css-lecture.com/log/javascript/012.html ホームページビルダー上の確認画面、及び、ローカル画面では、スムーズに作動するのですが、 サイト上にアップすると、上手くいきません。 サイトの背景は暗くなり、白い拡大画面は立ち上がるのですが、その白い画面の真ん中に×印がついていて、写真が掲載されません。 ホームページ作りは初心者なので、行き詰ってしまっています。 どなたかお解りの方、教えて頂けると幸いです。 お手数をおかけいたしますが、よろしくお願いいたします。
- ベストアンサー
- HTML
- 複数スクリプトの読み込みで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
- lightbox plus機能が上手く作動しません
lightbox plus機能が上手く作動せず、困っています。 ホームページビルダー14で、趣味のホームページを作っています。 「lightbox plus」機能を導入したく、all aboutの下記サイトを参考にしてダウンロードし、resourceファイルを写真ファイルにアップロードして、説明に沿ってｈｔｍｌを組み込んでみました。 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> 上記の様に組み込んだら、元の小さな画像から、拡大画像を表示するまでは出来たのですが、どうしても拡大画像が別ページで立ち上がってしまいます。 また、別ページに立ち上がった画像をクリックしても、元のページには戻らず、ブラウザの戻るボタンを押さなければ戻りません。。。 ページ上で拡大画像が立ち上がり、画面をクリックすると元のページに戻る様に設定したいのですが、どうすれば良いのか分かりません。 ホームページ作りは始めたばかりなので、恥ずかしいほど素人です。 どなたかお解りの方がいらっしゃいましたら、お手数ですがよろしくお願いいたします。 専門用語は、只今勉強中なので、出来れば分かり易い言葉で教えて頂けると幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- Lightbox2.0をウェブリブログ(BIGLOBE)で使用するには。
この度、ウェブリブログでブログを始めて、Lightbox2.0を導入しようと試みているのですが 試行錯誤してみても結果、中途半端なできになり行き詰ってしまったので質問させていただきます。 長いですが、お知恵を貸していただけると大変助かります。よろしくお願いしますm(_ _)m (1)ダウンロードしてきたファイルは、ウェブリブログではディレクトリ管理できないし、js、cssはUP自体出来ないので、 他で借りていた有料サーバー(FC2ホームページ)に全て纏めてUPしました。 (http://○○○/js/)(http://○○○/images/)(http://○○○/css/) (2)htmlはウェブリブログでは直接編集できないのでウェブリブログのフリースペースに書き足しました。 ( <script type="text/javascript" src="http://○○○/js/prototype.js"></script> <script type="text/javascript" src="http://○○○/js/scriptaculous.js"?load=effects,builder></script> <script type="text/javascript" src="http://○○○/js/lightbox.js"></script> <link rel="stylesheet" href="http://○○○/css/lightbox.css" type="text/css" media="screen" />) (ここに書いたショートカットアイコンも機能しているので大丈夫なようです。) (3)解説サイトに倣ってlightbox.csを2箇所書き換え ( #prevLink:hover, #prevLink:visited:hover { background: url(http://○○○/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://○○○/images/nextlabel.gif) right 15% no-repeat; } ) (4)同じくlightbox.jsを4箇所書き換え fileLoadingImage: 'http://○○○/images/loading.gif', fileBottomNavCloseImage: 'http://○○○/images/closelabel.gif', <img src="○○○/images/loading.gif"> <img src="○○○/images/close.gif"> そして、Firefoxで確認してみると右下に出る筈のclose×ボタンが出ない…。IE6ではnext画像とplev画像が表示されていない。 試しに(4)のloading.gifとcloselabel.gifをウェブリブログにUP。絶対パスで書き換え。 すると、何故かは分からないがFirefoxIE6ともにcloseボタンが正常に表示されました。 しかし、IE6で確認してみると今度はこちらでprevlabel.gifとnextlabel.gifが表示されていない…。 ウェブリブログにUP。絶対パスで書き換えをしてみると今度はFirefoxで表示されない。結局Firefox優先ということで戻しました。 そして何気なくoperaで見てみると、新しい不具合…。 表示はされるのだがページの下の方。スクロールしていかないと見れない。最初は背景がグレーになるだけだ！と思ったほど。 以上、分かりにくい文章だとは思いますが、ご教示いただきたいと思います！よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 ちょっと見直してみたところ、一番最初の行（DTD？）を変えたのが原因のようでした。 元のタイプが、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> lightbox導入事例のタイプが <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> です。 ここを導入事例通りにすればlightboxは動きますが、レイアウトが崩れてしまいます。 この場合はどう対処すればいいのでしょうか。 再度ご教授願えれば助かります。
補足
また自分なりに色々と弄ってたら、何だかlightboxを動くようには出来ました。 でも、IE7とSlepnirの表示が何故か上側になってしまいます。 operaとFireFoxは中央に表示されます。 できれば全て中央に表示させたいのですが…。 cssを見ると、 #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} という記述がありますが、これを変えればいいのでしょうか。 もしお分かりの方いらっしゃいましたらご教授いただけないでしょうか。 ちょっと混乱してきてしまいました。 よろしくお願いいたします。