- ベストアンサー
lightboxのボタンの位置調整
jqueryのlightboxを使用しようかと思っています。 ただ、「前へ」や「次へ」のボタンを画像の上ではなく、下の部分（title属性内に記述したものが表示されている部分）に配置したいのですが、うまくいきません。 CSSで場所を指定してもtitle属性の部分より下にもぐりこんでしまいます。 何か良い対処法がございましたらご教授願えますでしょうか。 よろしくお願いいたします。
- ikehata_shin
- お礼率54% (39/72)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 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
- 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は、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
- Lightboxとjqueryについて
零細企業で素人WEB担当をやっております。 Lightboxとjqueryの設置でアドバイスを頂きたく投稿させて頂きました。 よろしくお願い致します。 最近の流れをうけてソーシャルボタンを設置しようかと思い、下記URLの方法が簡単でしたので設置してみたところです。ソーシャルボタンは簡単に設置出来ましたが従来使用していたLightboxが動作しなくなってしまいました。 当然なのでしょうが、ソーシャルボタン用に記述したjava scriptの読み込み部分を削除するとLightboxは動作するようになります。同時に設置出来ない場合には地道に1ページずつでもボタンを設置していこうかとも考えておりますが効率が悪いので躊躇しております。 知識があれば簡単な事なのではないかと思いご相談させて頂きました。 何卒よろしくお願い致しますm(_ _)m ○ソーシャルボタンの設置方法 http://itra.jp/jquery_socialbutton_plugin/
- ベストアンサー
- レンタルサーバ・ASP
- 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
- Lightbox2でのキャプションについて
画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、（当然ですが）サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか？ ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想（こんな感じに出来たらいいなぁというイメージです） <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。（JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません） 他に何か良い方法はありますでしょうか？
- ベストアンサー
- 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
- アメブロでの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のアニメーションを無くしたい
フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。
- ベストアンサー
- JavaScript
- wordpress内lightbox 画像階層
コンフリクト対策でwordpress内包のjQuery(プラグイン)を使わないで普通のjQueryだけを使うように設定しました。 その後に jquery.lightbox-0.5.jsを入れましたが、 「close」や「next」やらの画像が入ったimagesフォルダをどこに置いていいのか分かりません。 wordpress内でなかったら、lightboxを使用するページと同階層というのは知っていて、 テーマ内のindex.phpと同階層にimagesフォルダ置いてみたり、 cssフォルダと同階層にimagesフォルダ置いてみたりしましたが 画像が表示されません。 jquery.lightbox-0.5.js自体は動作しています。 lightbox適用したい画像は固定ページ内にあるのですがwordpressもPHPも初心者故、 固定ページもどのファイルから書き出されているのかもよく分かっていません。 (index.phpとデータベースから書き出されている内容の組み合わせなのでしょうか？) ざっくりと書いた質問で分かりにくいとは思いますが、宜しくお願い致します。
- ベストアンサー
- PHP
- 購入したウィルスセキュリティーのマイページから、使用中のソフトウェアを確認したいが、製品のユーザー登録画面が表示されずに現在のソフトウェア画面にならない
- ウィルスセキュリティーを3台使用しているが、ノートPCとディスクトップPCの両方で同じ問題が発生している
- Windows10を使用しているが、使用中のソフトウェアが確認できない状況で困っている
