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
});
});
これで大体同じ動きをしよるはずです。
コメント