Home > Archives > March 2013

March 2013

colorbox.js カスタマイズ

popupを表示するのに人気があるのかな?
jqueryでできたLightBox風のpopupだそうな


まぁ、いろいろなエフェクト設定、表示させれるモードがあって簡単に設置できる分にはとても良い感じだ


でだ、画像やページのスライドショー機能を持っているのだが改ページ機能はディフォルトでループとなっている
* まぁループで基本は問題なんだけどね( ^ω^)・・・


今回修正するのはループしたくない要望を改善させる

1 > 2 > 3 > 1 > 2
となるのがいやなんだそうな (もちろんもどるもあるぜ)

1 <> 2 <> 3 としたいらしい (最初は戻りがなく最後は進がない)

まずそんな設定をcolorbox.jsは持ってないので

settingsに
previousDisable, nextDisableの変数を持たせる
* デフォは falseにでもしておきましょうか


if (settings.nextDisable) {
$("#cboxNext").css("display", "none");
} else {
$("#cboxNext").css("display", "");
}
if (settings.prevDisable) {
$("#cboxPrevious").css("display", "none");
} else {
$("#cboxPrevious").css("display", "");
}


あとはサブウィンドウがロードされる箇所にこんな感じにする
colorbox.cssの該当のタグを消せばいいんですね


* ただどこが開始か終了かわからない(詳しくソース見てないからw
 なので面倒だから


class='group iframeNonPrev'
class='group iframe'
class='group iframeNonNext'

とか手抜きww
rel が同じなら繋がるからね(。-_-。)



あぁ あとcolorbox.jsはiframeもサブウィンドに表示できるんですが
親 > 子 > 孫
っとウィンドを切り替えると

親 > 子(親の子) > 孫(子の子)
って位置づけになり

孫窓から一気に親のリンクを変えれないみたいだった

なので

無理やりunloadに自分の親をリンクさせて自分を閉じるというわけのわからない処理をいれた・・
すごく気持ち悪い(ーー;)


$(window).unload(function(){
ownCloseAndJump(GetCookie('url'));
});

function ownCloseAndJump(url){
if((url != null) && (url != 'undefine')){
var expire = new Date();
expire.setTime( expire.getTime() + 1000 * 2 );
document.cookie="url=" + url + "; expires=" + expire.toUTCString();

parent.location.href=url;
parent.$.fn.colorbox.close();
}
};




でもきっともっとスマートなやりかたがあるんだろう・・・


  • TrackBack (Close): -

More...

Home > Archives > March 2013

Search
Feeds

Page Top