colorboxの実験

たまにはちょいとTechよりな話題でも。

※スマホから観てる方には何ら意味の無いエントリーです＾＾

何か役に立つネタはないかな～とはてなブログのソースをなんとなく眺めてたら、実は結構色々なJavaScriptを呼んでくれてる事を発見しました。

下記は2013/4/2時点で読み込んでるJavaScriptたちです。

～shared.js:XXXXXXXXXXXXXXXXXX:/js/jquery-1.9.0.min.js,
/js/empty.js,
/js/jquery-ui-1.10.0.custom.min.js,
/js/jquery.cookie.js,
/js/jquery.hashchange.js,
/js/jquery.mousewheel.js,
/js/jquery.colorbox-min.js,
/js/jquery.flot.js,
/js/jquery.ui.datepicker-ja.js,
/js/jquery.tipsy.js,
/js/jquery.Jcrop.min.js,
/js/overthrow.js,
/js/json2.js,
/js/postMessage.js,
/js/keyString.js,
/js/jsdeferred.js,
/js/EditDesign.js,
/js/underscore-min.js,
/js/accesslog.js,
/js/base.js,
/js/backup.js,
/js/hatena.epic.component.js,
/js/admin.js,
/js/blogs.js,
/js/locale-all.js"

jQueryが使えることは散々既出だと思いますが、特筆すべきはcolorbox.jsでしょうか。colorboxはLightboxのような画像拡大エフェクトです。

普段写真ブログをやっててはてなフォトライフをストレージに使わず、外部に写真を置いている人にはありがたい機能です。

・・・で、実験してみた結果がこのとおり。

 ※下の画像をクリックしてみて下さい。

ちゃんとミュイーンって感じのエフェクトが動いてるのがおわかり頂けますでしょうか！？

使い方は非常に簡単なので、ここに貼っておきます。

ヘッダHTML部分に以下のJavaScriptを挿入

$(document).ready(function(){
    $("お好きなID or Classとか要素とか").colorbox();
});

あとは実際イメージを貼る箇所に適当に指定したIDやらを放り込めばOK

ここではID=photoとAタグを使った例などを↓

 <p id="photo"><a href="イメージのURL"><img src="サムネイルのURL"></a></p>

上の例の場合、 functionに渡す引数は "#photo a" になります。

詳しくはこのページのソースを見て頂ければ判ると思います。

ちょっと残念なのはJsファイル自体はてなさんのサーバにあるのであまりカスタマイズの融通が利かない事ですね。

念のため断っておきますが、はてなブログが正式にサポートしている機能では無いのでいつ無くなるかは判りません。その辺りは自己責任でお願いします。

何事も気になったら試してみるものですね。