- 締切済み
"lightbox"の"CLOSE"ボタンクリック時のページ内ジャンプ
ご質問させてください。 lightboxでオーバーレイ状態が表示された場合、 "CLOSE"ボタンまたは、フェードされた領域をクリックで、 元の画面に戻るかと思います。 このオーバーレイ状態の"CLOSE"ボタンを押した場合、 読み込み元のHTMLに設定されたページ内アンカーへジャンプすることは可能でしょうか？ 以下のソースのように、オーバーレイ状態から"アンカーポイント"へジャンプできればと思っております。 <body> <p><a href="01.jpg" rel="lightbox[photo]" title="コメント"><img src="01_thumb.jpg"></a> <p><a href="02.jpg" rel="lightbox[photo]" title="コメント"><img src="02_thumb.jpg"></a> <p><a href="03.jpg" rel="lightbox[photo]" title="コメント"><img src="03_thumb.jpg"></a> <div style="height:800px"></div> <a name="point" id="point"></a> アンカーポイント </body> "lightbox.js"の100行目付近の記述をカスタマイズすればよいのではと思うのですが、、、 100行："objBottomNavCloseLink.setAttribute('href','#');" ネット上のフォーラムを調べたり、トライアンドエラーを繰り返したのですが、 解決法が見つからなくご質問させていただきました。 よろしくお願いいたします。
- mg-s
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
以下のようにしてはいかがでしょうか。 Lightbox のバージョンは 2.04 です。 --- 1. Lightbox.js の156行目 Builder.node('a',{id:'bottomNavClose', href: '#' }, の # を #point に書きかえる。 2. Lightbox.js の437行目から始まる end() に以下を追加する。 window.location.href = $('bottomNavClose').href; --- Lightbox, Lightbox2 のソースを見てみましたが、ご質問中にある「100行目付近の記述」と いうのが見つけられませんでした。("objBottomNavCloseLink"を検索しても見つからず)
関連するQ&A
- LightBoxの使い方
HPを作っています。（HTMLでメモpad使用） ギャラリーを作成のために、LightBoxを使用しました。 画像が複数ある場合は、全部書き出さなければいけないのでしょうか？ 現状、書いたHTMLは以下です <a href="image/a/a1.jpg" rel="lightbox[a]"> <img src="image/thumb/a1.jpg" alt="" /></a> <a href="image/a/a2.jpg" rel="lightbox[a]"></a> <a href="image/a/a3.jpg" rel="lightbox[a]"></a> <a href="image/a/a4.jpg" rel="lightbox[a]"></a> ・ ・ ・ と、20コ続いていきます。 全ての画像を書き出さないといけないんでしょうか？ 何か簡単に全部の画像を表示させる方法はありませんか？ HTML初心者のため、難しいことは分りませんのでその辺ご考慮いただけたらありがたいです。
- 締切済み
- その他（インターネット・Webサービス）
- ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。 使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。 ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。 下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。 しかし、<div id="btn1">～</div>をクリックすると、 オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいに ギャラリー画面上に 「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」 と表示されます。 どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、 どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。 何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1"> /* オーバーレイ用のボックス */ <div id="galleria"> /* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div><!-- #galleria --> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay1 --> <div id="overlay2"> /* オーバーレイ用のボックス */ <div id="galleria1"> /* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div><!-- #galleria --> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay2 --> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option); /* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
- jqueryについて（v 1.4.2）
jqueryについて（v 1.4.2） <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。
- ベストアンサー
- AJAX
- 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
- 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
- lightboxのタイトル部分にリンクを設定したい
lightboxのタイトル部分にリンクを設定したいのですが... lightbox.jsを使用し、拡大した画像のタイトル部分にリンクを設定したく、 <a href="img/001.jpg" rel="lightbox[imagegroup]" title="<a href="http://www.google.co.jp/">sample</a>"><img class="fade_img" src="img/001.png" /></a> と記述しましたがリンクに飛んでくれません。 （右クリック>新しいタブで表示 にするとちゃんと飛んでくれます。） どのように直したら良いでしょうか。宜しくお願い致します。
- 締切済み
- JavaScript
- Light Window IE6,7,8での不具合について
こんにちは。javascript初心者です。 宜しくお願い致します。 Light Windowのサンプルを作成しております。 参考サイトの通りに作ってアップしたのですが、 WindowsIE6.7.8でおかしな事になって しまいました。 問題１：サムネール画像が表示されない パスはあっています。 マック版Safari.Firefoxでは問題なく表示されます。 問題2：フラッシュ動画が勝手に動いてしまいます。 マック版Safari.Firefoxでは問題ないです。 調べてみたのですが原因、解決方法が分かりません。 ブラウザに依存しないLightWindowというのも 見つかりませんでした。 以下、HTMLのソースです。 <!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"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="css/lightwindow.css" type="text/css"> <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/lightwindow.js"></script> <title>LightWindowサンプル</title> </head> <body> <!--グループではない画像を複数表示--> <div><a href="photo/002.jpg" class="lightwindow" title="夕焼け"><img src="thumb/002.jpg" width="96" height="54" alt="夕焼け" /></a> <a href="photo/003.jpg" class="lightwindow" title="富山湾"><img src="thumb/003.jpg" width="96" height="54" alt="富山湾"></a></div> <!--／グループではない画像を複数表示--> <!--グループで表示 --> <div> <a href="photo/001.jpg" class="lightwindow" rel="[00]" title="富士山"> <img src="thumb/001.jpg" width="96" height="54" alt="富士山"> </a> <a href="photo/002.jpg" class="lightwindow" rel="[00]" title="夕焼け"> <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け"> </a> <a href="photo/003.jpg" class="lightwindow" rel="[00]" title="富山湾"> <img src="thumb/003.jpg" width="96" height="54" alt="富山湾"> </a> </div> <!--／グループで表示 --> <div> <a href="photo/uranai.swf" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">swfの表示もOK</a> </div> <div> <a href="http://journal.mycom.co.jp/" class="lightwindow">毎コミジャーナル</a> </div> <div> <a href="http://www.yahoo.co.jp/" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=300">html大きさ指定入れるのもOK</a> </div> </body> </html> 参考にしたURLはこちらです。 http://journal.mycom.co.jp/articles/2007/10/02/lw/index.html 成果物はこちらです。 http://www1.odn.ne.jp/~cks23160/light_window_sample/ お分かりになる方、いらっしゃいましたらどうぞよろしくお願い します。
- 締切済み
- 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>になります。 初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。 上手く拡大表示するにはどうしたらいいのでしょうか？ 何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。 よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- IE6,IE7でThickBox3の画像がうまく表示されません。
IE6,IE7でThickBox3の画像がうまく表示されません。 htmlへの記述は以下のような感じなのですが、Firefoxでは問題なく表示されるのですが IE6、IE7だと、画像だけ表示されなかったり、同じ画像が上下に２枚表示されたりします。 そしてたまに上手く表示されます。 検索するとIEで真中に表示されないというのがありましたが、それとは原因が違うようです。 どなたかご存知の方はいませんでしょうか？ 宜しくお願い致します。 <ul> <li><a href="../img/photo/flower/001.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/001_s.jpg" alt="花" width="100" height="66" /></a></li> <li><a href="../img/photo/flower/002.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/002_s.jpg" alt="花" width="100" height="66" /></a></li> </ul>
- ベストアンサー
- HTML
お礼
ばっちりです！ まさにイメージ通りの動作を確認できました！ ご回答いただき誠にありがとうございました。 "100行目付近の記述"は所持してた古いバージョンにしかないようですね。