LightBox2のNEXT(PREV)ボタンを常に表示させる | art:worker

LightBox2のNEXT(PREV)ボタンを常に表示させる

iPhoneやiPadなどのタブレット端末でnext/prevボタンが表示されないのですが
(画像上をクリックで次や前の画像へ移動する動作は正常。ボタンが表示されないだけ)
lightbox.cssの:hoverで表示/非表示を制御しているのが原因で、タブレットではいたしかたなく。
以下、スマフォやタブレットの場合は常時表示にするcssを下記UAで振り分けて回避。

※ちなみにノートパソコンでも同じ状態のはずだし、
個人的にはLightBox系の画像ギャラリーはPCでも
NETXやPREVボタンが常に表示されている方がわかりやすいと思うので、
そういう風に変更する場合は下記のようなややこしいことはしなくても
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去してしまえばOK。

●STEP1
lightbox_tablet.cssなどという新規ファイルを作成して以下の記述をコピペ。
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去しただけのものです。

@import "./lightbox.css"; /* ←lightbox.cssを読み込み */

.lb-prev {
background: url(../images/prev.png) left 48% no-repeat;
}
.lb-next {
background: url(../images/next.png) right 48% no-repeat;
}

●STEP2
head内のlightbox.cssへのリンク部分を下記のように。パスやファイル名は適宜書き換えて下さい。
※ソース引用元:スマートフォン・タブレットの振り分けをどう考える? | Wakana.me

var ua = navigator.userAgent;
if(ua.indexOf('iPad') != -1||(ua.indexOf('Android') != -1 && ua.indexOf('EB-WX1GJ') != -1)){
//iPad & Androidタブレット
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPod') != -1 || ua.indexOf('Android') != -1){
//iPhone & iPod & Androidスマートフォン
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="lightbox.css">');
}

以上