![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
LightBox系のスクリプトで起こる現象なのですが、
画像単体ではなくて、複数舞をギャラリーとして扱う時に
画像にマウスを重ねるとNEXTという表示が出て
クリックすると次の画像に飛ぶ、ということができると思います。
そのような設定にしてある時、画像をクリックした時に
リンクを選んだ時の線が出てしまいます。
画像半分をくりぬいた様な感じでとても気になります。
うまく表現できないのですが添付の画像のように半分のところで
リンクの線が出てしまいます。
これがとても気になります。
私のIE8だけの現象でしょうか?
またでないようにする対処法ってあるでしょうか?
公式のExampleでも同じ現象が出ます。
ttp://leandrovieira.com/projects/jquery/lightbox/
![「LightBoxで」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/3/309893_5497d13bc2e3a/M.jpg)
No.2ベストアンサー
- 回答日時:
>>No.1 お礼
#lightbox-nav a { outline: none; }
私のIE8はoutlineプロパティが適用されてるようで
輪郭線はでないのですが、面倒そうなのでこれ以上はやめときます。
どうしても気になるなら、下手にいじるより
他のLightBox系プラグインを探すのが賢明かもしれないです。
たびたびありがとうございます。
my様のIEだと適用されているのですね
パッチの関係でしょうか。しかしながら
IE6,7を考えればどちらにしろ対策が必要ですね
まぁしょうもない個人サイトなのでそこまで考える必要はないのかもしれませんが・・・。
他のLB系のスクリプトで、
同じようにオンマウスクリックで次の画像に移る
というタイプは枠線が出てしまうものが多く困ってしまいました。
lightviewというものはこの現象がIE8でも起こらないので使いたいのですが
どうもアニメーションがもっさりに感じます。
見た目的には美しいのですが、ギャラリーとしてたくさん見たい場合
少しじれったくなってしまいます。
また画面がフェードというか光る感じが若干目に来ますね・・・
No.1
- 回答日時:
/* jquery.lightbox-0.5.css */
#lightbox-nav a { outline: none; }
outlineプロパティが適用されれば輪郭線はでないようですが、IEは対応が遅れたようです。
検索すればすぐ見つかると思いますが、blur()を利用した対策があるので試して下さい。
// jquery.lightbox-0.5.js
function _set_navigation() {
...
if ( settings.fixedNavigation ) {
$('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
.unbind()
.bind('click',function() {
settings.activeImage = settings.activeImage - 1;
_set_image_to_view();
return false;
}).focus(function() { this.blur(); }); // ココ
} else {
// Show the images button for Next buttons
$('#lightbox-nav-btnPrev').unbind().hover(function() {
$(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
},function() {
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
}).show().bind('click',function() {
settings.activeImage = settings.activeImage - 1;
_set_image_to_view();
return false;
}).focus(function() { this.blur(); }); // ココ
}
}
...
if ( settings.fixedNavigation ) {
$('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
.unbind()
.bind('click',function() {
settings.activeImage = settings.activeImage + 1;
_set_image_to_view();
return false;
}).focus(function() { this.blur(); }); // ココ
} else {
// Show the images button for Next buttons
$('#lightbox-nav-btnNext').unbind().hover(function() {
$(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
},function() {
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
}).show().bind('click',function() {
settings.activeImage = settings.activeImage + 1;
_set_image_to_view();
return false;
}).focus(function() { this.blur(); }); // ココ
}
jquery.lightbox-0.5.js 250行目あたりから300行目あたりにかけてが
#lightbox-nav-btnPrev、#lightbox-nav-btnNextそれぞれのclickイベントに関数をbindしている箇所です。
そこに.focus(function() { this.blur(); })を追記します。
outlineプロパティが適用されたブラウザには無用です。動作に影響はないと思いますが念のため。
my--様
ご回答をどうもありがとうございました。
まずは現象の方のご確認ありがとうございます。
やはりこの枠線の問題は既出のものであったのですね・・・。
IEでも次くらいには対応されるのでしょうかね。
教えていただいたbluaの方、ためさせていただきました。
ところが確かにそのような項目はあるのですが、
自分で追加しても構文の文法的な間違いがあるのだと思いますが
うまく動作してくれませんでした。
せっかく教えていただいたのに申し訳ありません・・・。
スクリプトの法の問題らしいので、imgにonfocus="this.blur();"を付けるやり方でも
どうやら枠線は消せないようです。
ただお答えとしては大変勉強になりました。
もう少し自力でなんとかできないか頑張ってみたいと思います。
他のスクリプトを試すかもしれませんが・・・。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Instagram インスタの画像を複数枚投稿出来るものと出来ないものがある問題についてどなたか教えて下さい。 インスタ 4 2022/06/07 13:53
- Android(アンドロイド) TIFF画像を表示できるAndroidアプリを探してます。 3 2022/05/16 09:00
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- PDF Word→pdfに変換する際,図形部分に画像が上書きされる 1 2023/02/01 12:49
- Excel(エクセル) Excel2019 マクロを使用し画像を貼り付けした際のリンク切れについて 2 2022/11/15 16:14
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- 一眼レフカメラ 「回折現象の画像」と「ピントが合っていない画像」の違いはありますか?(区別できますか?) 7 2022/06/02 21:25
- テレビ テレビ 画像が乱れる横に線が入る 特にNHKが多い 7年ぐらい使用しているテレビです 画像が乱れるこ 7 2022/11/13 15:15
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
functionから別のfunctionを実...
-
XMLHttpRequestでキャッシュを...
-
ActiveXobjectが作成できない
-
二次元配列を使って順位をだす...
-
乗換案内 VBAで操作したい
-
javascriptの基本的なことだと...
-
window.openでタイトル名の指定
-
Boolean型配列中のTrueの有無を...
-
JavaScriptで、現在日時から100...
-
同じIDで定義した要素の配列を...
-
Googleスプレッドシートとスク...
-
DOM要素を削除しても、イベント...
-
【Tabキー】特定の範囲内だけで...
-
Javascriptで定期的にF5を押す...
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
『名前空間』の意味を教えてく...
-
JavaScriptでの動的な多次元配...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
要素名がスペースを含む場合のj...
-
javascript(jQuery)でセル内...
-
ajax反映後のjqueryが動かない
-
jQueryの :not() .not() が有効...
-
getElementByIdを使用したグロ...
-
コードをスマートにさせたい。
-
クリックすると上に開くアコー...
-
jQueryの"return false"の役割...
-
jQueryが読み込めない
-
個別では動く、javascriptのエラー
-
一つのアクションで関数を二つ...
-
jqueryの変数を関数の外に出す方法
-
R言語
-
jQuery|:not(:animated)
-
即時関数でプライベート変数的...
-
スムーズに動く アニメーション...
おすすめ情報