LightBox系プラグインで、画面が立ち上がったときにスクロールバーを消す。
いわゆる「LightBox」系のプラグインを使うときは、ページのスクロールバーを消したいと思うことが多い。
表示しているコンテンツがHTMLページだったりしたときに、マウスのホイールを表示しているコンテンツに集中させたいし、表示しているのが画像だったとしてもなにやら後ろがスクロールしているのとか、非常に見づらいし。
そもそも、プラグインによっては親のスクロールによって、表示されている部分もスクロールして画面から消えていってしまう（positionがfixedになっていない）ものもあったりして。
そんなときに使いたいのが
の二つ。
たいていのプラグインはコンテンツを開くときに「open()」や「show()」ってfunctionが実行されるので、その中に「document.body.style.overflow="hidden";」を入れてやることでスクロールバーを消すことができる。
コンテンツを閉じる時には、スクロールバーをまた表示。
これもたいていの場合は「close()」ってfunctionがあるので、その中に「document.body.style.overflow="visible";」を入れてやればおk。
JavaScriptで書かれたプラグインは（だけじゃないくてプログラム全般は）functionの集合体みたいな感じなので、どのfunctionがどんな動きをしているのか…というのが分かれば、カスタマイズもお手の物。
自分でロジックを考えてコードを書くのは大変だけど。
今日もまた自分でロジックを考えながら、ひたすらプログラムをやってます。
カスタマイズだけで食べていけたら楽なんだけど、それじゃ面白くないしなぁ…。
プログラム意外に趣味があって、とりあえずお金を稼ぐための手段だってことで割り切ってしまえば、カスタマイズだけでも十分商売になる。
楽天に出店していると、よくこんな営業メールがきます。
「あなたのサイトに効果的なバナーを！」
要は、jQueryとかのスライドバナーやローテーションバナーとかを実装しませんかって営業なんだけど、金額が２万円とかするのに驚いた。
初期費用2万円に、画像とリンクの差し替えが１点1500円とか。
いくつか見て回ったけど、全部フリーのプラグイン使ってました。
でも、使えない人にしてみたらお金を払ってでも…って思っちゃうんだろうなぁ。
えー。
僕が教えている生徒さんたちの大半は、2時間ほどで自分の好きなバナーを設置することができるようになりました。
慣れてくれば１時間もかからないわけで、
「仕事でやったら1日に16万円稼げます！」
ってとこで盛り上がっていましたが…(・∀・)
名簿屋さんから楽天に出店しているショップの名簿買って、ガンガン営業メールでも送ってみたら、それくらいは稼げるかもです。
稼げる技術を持っている人材のほうが企業にとってはありがたい訳で、僕はそういうのを中心に教えてます。
ついでに…。
thickbox.jsの場合には上記のコードを使って、ウィンドウサイズをパーセント指定できます。
「return width * 0.8」や「return height * 0.8」は、ウィンドウサイズを取得して、その0.8倍（つまり80%）しているだけです。
コードを、どこでもいいので（一番最後でいいかな）追加して、
といった感じで変更してあげれば、デフォルトで630px×440pxになっているのを変更できます。
ウィンドウのサイズが決まっているプラグインて珍しいんですけどね。
表示しているコンテンツがHTMLページだったりしたときに、マウスのホイールを表示しているコンテンツに集中させたいし、表示しているのが画像だったとしてもなにやら後ろがスクロールしているのとか、非常に見づらいし。
そもそも、プラグインによっては親のスクロールによって、表示されている部分もスクロールして画面から消えていってしまう（positionがfixedになっていない）ものもあったりして。
そんなときに使いたいのが
document.body.style.overflow="hidden";//スクロールバー非表示
document.body.style.overflow="visible";//スクロールバー表示
の二つ。
たいていのプラグインはコンテンツを開くときに「open()」や「show()」ってfunctionが実行されるので、その中に「document.body.style.overflow="hidden";」を入れてやることでスクロールバーを消すことができる。
コンテンツを閉じる時には、スクロールバーをまた表示。
これもたいていの場合は「close()」ってfunctionがあるので、その中に「document.body.style.overflow="visible";」を入れてやればおk。
JavaScriptで書かれたプラグインは（だけじゃないくてプログラム全般は）functionの集合体みたいな感じなので、どのfunctionがどんな動きをしているのか…というのが分かれば、カスタマイズもお手の物。
自分でロジックを考えてコードを書くのは大変だけど。
今日もまた自分でロジックを考えながら、ひたすらプログラムをやってます。
カスタマイズだけで食べていけたら楽なんだけど、それじゃ面白くないしなぁ…。
プログラム意外に趣味があって、とりあえずお金を稼ぐための手段だってことで割り切ってしまえば、カスタマイズだけでも十分商売になる。
楽天に出店していると、よくこんな営業メールがきます。
「あなたのサイトに効果的なバナーを！」
要は、jQueryとかのスライドバナーやローテーションバナーとかを実装しませんかって営業なんだけど、金額が２万円とかするのに驚いた。
初期費用2万円に、画像とリンクの差し替えが１点1500円とか。
いくつか見て回ったけど、全部フリーのプラグイン使ってました。
でも、使えない人にしてみたらお金を払ってでも…って思っちゃうんだろうなぁ。
えー。
僕が教えている生徒さんたちの大半は、2時間ほどで自分の好きなバナーを設置することができるようになりました。
慣れてくれば１時間もかからないわけで、
「仕事でやったら1日に16万円稼げます！」
ってとこで盛り上がっていましたが…(・∀・)
名簿屋さんから楽天に出店しているショップの名簿買って、ガンガン営業メールでも送ってみたら、それくらいは稼げるかもです。
稼げる技術を持っている人材のほうが企業にとってはありがたい訳で、僕はそういうのを中心に教えてます。
ついでに…。
function custom_width() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return width * 0.8;
}
function custom_height() {
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
return height * 0.8;
}
thickbox.jsの場合には上記のコードを使って、ウィンドウサイズをパーセント指定できます。
「return width * 0.8」や「return height * 0.8」は、ウィンドウサイズを取得して、その0.8倍（つまり80%）しているだけです。
コードを、どこでもいいので（一番最後でいいかな）追加して、
TB_WIDTH = (params['width']*1) + 30 || 630;
▼
TB_WIDTH = (params['width']*1) + 30 || custom_width();
TB_HEIGHT = (params['height']*1) + 40 || 440;
▼
TB_HEIGHT = (params['height']*1) + 40 || custom_height();
といった感じで変更してあげれば、デフォルトで630px×440pxになっているのを変更できます。
ウィンドウのサイズが決まっているプラグインて珍しいんですけどね。