Mootools 1.4へのアップグレード　Lightbox編

Lightbox系はSqueezeBoxやSlimboxを使っていたのですが、1.4系に最適化されたものないかと検索した結果「mootools 1.4 lightbox」でいいのが見つかりました。って一発でした。

ということでCeraBoxというものを使います。
Lightboxとしての機能もそうですが、YouTubeやSWF、IFRAME、それにAndroidやiOSなどのスマートフォンにも対応しているので、すんげぇいい感じです。
ですが、ちょっと問題が。使い方が違うのでそのままでは使えない。
Slimboxでは以下のようにrel属性を設定するようにしていました。

<a href="large-image.png" rel="lightbox[]" target="_blank" title="Image title"><img alt="Image title" height="150" src="small-image.png" width="200" /></a>

ここでブランケット（[]）の中に文字列を入れることでグループ化することができます。
過去の記事を書き換えるのは面倒臭いので、このルールを変更することなくCeraBoxに移行するための対応をすることにします。

ということで、JavaScriptをガリガリっと。

var LightboxManager = {
    /**
     * Create Lightbox
     * Using CeraBox on Mootools
     *
     * @param attrName string Name of attribute
     * @param groupName string Name of group, and attribute value must be 'groupName[]'
     * @param options object Options for CeraBox
     */
    createLightbox: function(attrName, groupName, options) {
        options = options || {};
        var elements = $$('a[' + attrName + ']');
        var targetElements = [];
        var regexp = new RegExp('^' + groupName, 'i');
        for (var i = 0, len = elements.length; i < len; i++) {
            var relValue = elements[i].getAttribute(attrName);
            if (relValue.match(regexp)) {
                if (!targetElements[relValue]) {
                    targetElements[relValue] = 0;
                }
                targetElements[relValue]++;
            }
        }
        for (var i in targetElements) {
            var createOptions = options;
            if (i.match(/\[.*\]/)) {
                createOptions.group = targetElements[i] > 1;
            } else {
                createOptions.group = false;
            }
            $$('a[' + attrName + '="' + i + '"]').cerabox(createOptions);
        }
    }
}

window.addEvent('load', function(e) {
    LightboxManager.createLightbox('rel', 'lightbox', {
        animation: 'ease',
        loaderAtItem: true,
        titleFormat: 'Image {number} / {total} - {title}',
        fixedPosition: true
    });
});

これで大体同じ動きをしよるはずです。

• 次へ