• ベストアンサー

Lightboxを用いても拡大されない

現在、自分が作っているHPでLightboxを使おうとしているのですが、 拡大したい画像は表示されるのですが、クリックしても何も起こりません。 CSSファイルやJavascriptファイル、 Lightboxを利用したいhtmlファイルで修正すべき箇所はしたと思うのですが・・・。 またパスは絶対パスが推奨されているようですが相対パスでは動かないでしょうか? ちなみに私が利用しているブラウザはSleipnirです。 ぜひ回答をお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> タグは間違っていないようです(上記はサンプルファイルより抜粋で、画像ファイルへのパスを http:// からにしても正しく表示されます)。 >拡大したい画像は表示されるのですが、クリックしても何も起こりません。 これって、サムネイル(小さい画像)をクリックしても変化無しってことですよね? lightbox が動作してなくても、大きい画像が左上に表示されるはずなのですが。 不具合の確認は、web上ですか、それともPC上ですか? web上なら、必要なファイルがアップロードされていない可能性があります。 PC上なら、次のことを試してください。 lightbox をダウンロードして解凍したら中に、index.html が入っていますね、そのファイルで動作確認してください。 そのファイルで正しく動作したのなら、あなたが作成しているファイルに問題があることになります。

little_bob
質問者

お礼

DLしたファイルから文をコピーし、該当箇所を修正しなおしたら正常に動きました。 どうやら自分でも気づかない内に変な箇所をいじっていたようです。 回答ありがとうございました。

その他の回答 (1)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

>クリックしても何も起こりません それなら、Lightbox に関係なく HTML のアンカータグが間違っています。 Lightbox が動かない場合は、上記のようにならず、画像は表示されますから。 >またパスは絶対パスが推奨されているようですが相対パスでは動かないでしょうか その思われるなら、絶対パスを試せばわかることではありませんか。 ちなみに、Sleionir でも IE と同じ動作です、ただしプラグインの影響で動かない可能性も否定できません。

little_bob
質問者

補足

画像のリンクのところを <a href="Lightboxで表示させたい画像までの絶対パス" rel="lightbox" title=""> <img src="縮小表示させたい画像までの絶対パス" alt="" /></a> のように表記しているのですが、正しくないのでしょうか?

関連するQ&A

  • 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は、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。

  • LightBoxなどでPDFを表示させたい

    別ウィンドウを開かずに画像を同じウィンドウ内に表示させるJavaScript(LightBox)は入手できたのですが、このLightBoxの表示のさせかたでPDFファイルを表示させたい場合はどのようにすればよいかどなたか分かりますでしょうか? LightBoxのようにブラウザウィンドウ内が薄暗くなってその真ん中にPDFを表示させたいと思っています。 宜しくお願いします。

  • lightbox2.04の修正について

    こんにちは。 どこで質問すればいいのか迷ったのですが、JavaScriptを使用しているみたいなので こちらに書き込ませて頂きました。 先日自サイトで利用したいと思い、『lightbox2.04』をDLしました。 設置方法も簡単だということで、導入は何とか出来たのですが、 その際に自サイトのCSSのレイアウトが崩れてしまうのです。 (たとえば文字サイズやフォントなど) サイト自体はテンプレートを使っておりまして、細かい内容などはよく分かりません。 それでもCSSを一つに纏めるなどしてみたのですが、更にレイアウトが崩れてしまい、 お手上げでした。 出来ましたら、lightboxのほうのCSSを手直しするなどして対応できれば、と思っていますが、 どこをどう変えればいいのかわかりません。 因みに設置の際参考にしたのは下記のページです。 http://www.chamanet.com/lightbox/ とても初心者で申し訳ありませんが、ご指導頂ければ助かります。 補足が必要な場合は、仰って頂ければ対応いたします。 お手数おかけしますが、何卒よろしくお願いいたします。

  • 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> 上記の様に組み込んだら、元の小さな画像から、拡大画像を表示するまでは出来たのですが、どうしても拡大画像が別ページで立ち上がってしまいます。 また、別ページに立ち上がった画像をクリックしても、元のページには戻らず、ブラウザの戻るボタンを押さなければ戻りません。。。 ページ上で拡大画像が立ち上がり、画面をクリックすると元のページに戻る様に設定したいのですが、どうすれば良いのか分かりません。 ホームページ作りは始めたばかりなので、恥ずかしいほど素人です。 どなたかお解りの方がいらっしゃいましたら、お手数ですがよろしくお願いいたします。 専門用語は、只今勉強中なので、出来れば分かり易い言葉で教えて頂けると幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 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>

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、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
  • 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

  • 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> お願いします。

  • lightbox風なもののCSSの使い方

    http://www.e-magine.ro/web-dev-and-design/36/moodalbox/ ↑のサイトのlightbox風の機能を使って、HTMLファイルをページ遷移なしで読み込もうとしています。読み込むページと読み込まれるページは違うフォルダにあり、それぞれに違うCSSを適用しているのですが、どうやっても読み込まれるページで画像が取得できません。外部CSS内のbackgroundやHTML内のimgも表示されません。その他の配置に関するCSSはちゃんと適用されているので、なぜ画像だけが取得できないのかが理解できません。 読み込まれるページのCSSを読み込むページのheadで読み込んでみたり、読み込まれるページのHTMLに直接CSSを書いてみたりもしましたが、変化がありませんでした。CSSはおろか画像やリンクなどすべてを全ページで相対指定しているので、そういうところに差異が出たのかなと疑っています。 そこで、こういう風なツールを使った時、読み込まれるCSSは読み込むページと読み込まれるページのどちらで読み込むべきなんでしょうか。また、ページ遷移していない以上、読みこまれるページの相対指定も読み込むページからの指定とするべきなんでしょうか。よろしくお願いします。

専門家に質問してみよう