Home > PHPのお話 > colorbox.js カスタマイズ

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:No Trackbacks

TrackBack URL for this entry
Sorry, no trackback pings are accepted.
Listed below are links to weblogs that reference
colorbox.js カスタマイズ from 世の中いろいろ
トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

Home > PHPのお話 > colorbox.js カスタマイズ

Search
Feeds

Page Top