LightBoxで

質問

LightBox系のスクリプトで起こる現象なのですが、
画像単体ではなくて、複数舞をギャラリーとして扱う時に
画像にマウスを重ねるとNEXTという表示が出て
クリックすると次の画像に飛ぶ、ということができると思います。
そのような設定にしてある時、画像をクリックした時に
リンクを選んだ時の線が出てしまいます。
画像半分をくりぬいた様な感じでとても気になります。
うまく表現できないのですが添付の画像のように半分のところで
リンクの線が出てしまいます。
これがとても気になります。
私のIE8だけの現象でしょうか？
またでないようにする対処法ってあるでしょうか？
公式のExampleでも同じ現象が出ます。
ttp://leandrovieira.com/projects/jquery/lightbox/

回答No.2

my-- · ベストアンサー

>>No.1 お礼

#lightbox-nav a { outline: none; }

私のIE8はoutlineプロパティが適用されてるようで
輪郭線はでないのですが、面倒そうなのでこれ以上はやめときます。

どうしても気になるなら、下手にいじるより
他のLightBox系プラグインを探すのが賢明かもしれないです。

お礼

たびたびありがとうございます。
my様のIEだと適用されているのですね
パッチの関係でしょうか。しかしながら
IE6,7を考えればどちらにしろ対策が必要ですね
まぁしょうもない個人サイトなのでそこまで考える必要はないのかもしれませんが・・・。
他のLB系のスクリプトで、
同じようにオンマウスクリックで次の画像に移る
というタイプは枠線が出てしまうものが多く困ってしまいました。
lightviewというものはこの現象がIE8でも起こらないので使いたいのですが
どうもアニメーションがもっさりに感じます。
見た目的には美しいのですが、ギャラリーとしてたくさん見たい場合
少しじれったくなってしまいます。
また画面がフェードというか光る感じが若干目に来ますね・・・

回答No.1

my--

/* 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();"を付けるやり方でも
どうやら枠線は消せないようです。
ただお答えとしては大変勉強になりました。
もう少し自力でなんとかできないか頑張ってみたいと思います。
他のスクリプトを試すかもしれませんが・・・。
どうもありがとうございました。