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