アメブロでjQuery lightBox を使う。

需要があるみたいなんで、書いておきます。

まずは、「jquery.lightbox-0.5.js」のセッティング部分をこんな感じに書きなおしてます。
実際はファイル名が長いので「lightbox.js」とかに変更してありますが。

$.fn.lightBox = function(settings) { 
    settings = jQuery.extend({
    overlayBgColor:'#000',
    overlayOpacity:0.8,
    fixedNavigation:false,
    imageLoading:'http://webmage.pro/plugin/lightbox/lightbox-ico-loading.gif',
    imageBtnPrev:'http://webmage.pro/plugin/lightbox/lightbox-btn-prev.gif',
    imageBtnNext:'http://webmage.pro/plugin/lightbox/lightbox-btn-next.gif',
    imageBtnClose:'http://webmage.pro/plugin/lightbox/lightbox-btn-close.gif',
    imageBlank:'http://webmage.pro/plugin/lightbox/lightbox-blank.gif',
    containerBorderSize:10,
    containerResizeSpeed:400,
    txtImage:'Image',
    txtOf:'of',
    keyToClose:'c',
    keyToPrev:'p',
    keyToNext:'n',
    imageArray:[],
    activeImage:0
    },settings);

要は、「imageLoading」～「imageBlank」の画像をフルパス指定している、というわけです。

僕はCSSとかJSとかフォルダを作るのがめんどくさかったのでルートの下に「lightbox」ってフォルダを作って、全部そこに入れちゃってます。
フツーに解凍して出来るフォルダ構造を使うなら「http://サイトURL/lightbox/images/****.gif」とかになりますね。


あとは、フリープラグインで読み込みと設定を行います。

<link href="http://webmage.pro/plugin/lightbox/lightbox.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://webmage.pro/plugin/lightbox/lightbox.js"></script>
<script type="text/javascript">
$(function(){
//アンカータグのリンクが[.jpg][.gif][.png]の場合、lightBoxで表示
$('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightBox();
});
</script>

僕の場合はこんな感じです。
とりあえずフリープラグインに上記コードを張り付ければ、ブログ内に下記のように書けば動くと思います。

<a href="http://webmage.pro/blog_img/20111219-1.jpg">
    <img src="http://webmage.pro/blog_img/20111219-1s.jpg">
</a>

あんまり僕の借りてるサーバーにリンクを貼るのはどうかと思いますが、まずはやってみて上手くいくようだったら
「http://webmage.pro/plugin/lightbox/」からデータ落として、自前サーバーにうpしてみてください。


あ、jQueryは読み込まなくていいみたいです。
http://stat100.ameba.jp/blog/js/apm001.js
で読み込まれてるみたいなんで。