 |
|
|
|
|
|
|
 |
|
 |
 |
 |
 |
 |
 |
 |
 |
|
mt-galleryでタグ「Ajax」が付けられているもの
to-RのKazuma Nishihata様が作成されたプラグインです。
AjaxのlightboxをMTで仕用するときに
lightboxの「rel="lightbox"」を自動で付与してくれて大変便利です。
これだとMTのCMS.pm をダウンロードして、
rel="lightbox"を追加しなくてすみます。
さっそく使用させていただいてます。
ありがとうございました。
AjaxのlightboxをMTで仕用するときに
lightboxの「rel="lightbox"」を自動で付与してくれて大変便利です。
これだとMTのCMS.pm をダウンロードして、
rel="lightbox"を追加しなくてすみます。
さっそく使用させていただいてます。
ありがとうございました。
動きがきもちいいタブメニューを発見したので実装手順をAjax-testに覚書。
（ＭＴに実装する場合）
Ajax(prototype)です。
moo.fxというサイトからtabAccordion.zipをダウンロードして解凍します。
中のtabbed.htmlというファイルをDreamweaverで開いて
54行目からの
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
の前に
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<link rel="stylesheet" href="<$MTBlogURL$>tabAccordion/scripts/moo.css" type="text/css" media="screen" />
を付け足して（装飾するｃｓｓファイルをscriptsフォルダーに同梱した場合）
<script type="text/javascript" src="<$MTBlogURL$>tabAccordion/scripts/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>tabAccordion/scripts/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>tabAccordion/scripts/moo.fx.pack.js"></script>
に書き換えます。
そして77行目からの
<body>タグ内を自分の好みにアレンジし、
100行目からの
<script type="text/javascript" src="<$MTBlogURL$>tabAccordion/scripts/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>tabAccordion/scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
を最後の</div>と</body>の間に挿入します。（重要）
あとは54行目に書いたサイトパスの場所にアップして終了です。
Element.cleanWhitespace('content');
init();
</script>
lightboxはそのままだと動作しないので
ＭＴに導入するときの手順を覚書しときます。
まず、LightBox2.04のダウンロードページからZIPファイルをダウンロード。
解凍したら、jsホルダーの中にあるlightbox.jsをエディターで開いて
49行目と50行目付近の
上書き保存したら解凍したホルダーの中身を
lightboxという名のホルダーに入れてMT本体がある場所へアップロードします。
今度はＭＴ側の方にコードを記述します。
テンプレートモジュールのヘッダー内の[head]と[/head]の間ならどこでもOK。
私は新たにテンプレートモジュール「lightbox」というモジュールをつくって
<$MTInclude module="lightbox"$>で[head]と[/head]の間に埋め込みました。
記述するコードはlightboxを動作させるためのJavaScriptと
ポップアップウインドウを装飾するためのCSSです。
解凍したときに一緒に入っていたindex.htmlに記述されている8行目からの
に書き換えテンプレートモジュールのヘッダー内の
[head]と[/head]の間に記述するだけです。 簡単ですねｗ。
そしてブログ記事の画像のソースにはrel="lightbox"を付け足すだけです。
今回は、おまけでアイテム画像の方にもlightboxを仕込みます。
ウィジェットテンプレートのアイテムを開いたら
ＭＴに導入するときの手順を覚書しときます。
まず、LightBox2.04のダウンロードページからZIPファイルをダウンロード。
解凍したら、jsホルダーの中にあるlightbox.jsをエディターで開いて
49行目と50行目付近の
fileLoadingImage: 'images/loading.gif',と
fileBottomNavCloseImage: 'images/closelabel.gif',
のパスを
fileBottomNavCloseImage: 'images/closelabel.gif',
fileLoadingImage: 'MT本体のサイトパス/lightbox/images/loading.gif', と
fileBottomNavCloseImage:'MT本体のサイトパス/lightbox/images/closelabel.gif',
に書き換えます。
fileBottomNavCloseImage:'MT本体のサイトパス/lightbox/images/closelabel.gif',
上書き保存したら解凍したホルダーの中身を
lightboxという名のホルダーに入れてMT本体がある場所へアップロードします。
今度はＭＴ側の方にコードを記述します。
テンプレートモジュールのヘッダー内の[head]と[/head]の間ならどこでもOK。
私は新たにテンプレートモジュール「lightbox」というモジュールをつくって
<$MTInclude module="lightbox"$>で[head]と[/head]の間に埋め込みました。
記述するコードはlightboxを動作させるためのJavaScriptと
ポップアップウインドウを装飾するためのCSSです。
解凍したときに一緒に入っていたindex.htmlに記述されている8行目からの
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
を
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="<$MTBlogURL$>lightbox/js/prototype.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="<$MTBlogURL$>lightbox/js/lightbox.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>lightbox/js/prototype.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="<$MTBlogURL$>lightbox/js/lightbox.js" type="text/javascript"></script>
に書き換えテンプレートモジュールのヘッダー内の
[head]と[/head]の間に記述するだけです。 簡単ですねｗ。
そしてブログ記事の画像のソースにはrel="lightbox"を付け足すだけです。
今回は、おまけでアイテム画像の方にもlightboxを仕込みます。
ウィジェットテンプレートのアイテムを開いたら
<a class="asset-image" href="<$MTAssetURL$>">
と記述されてる場所を探して
<a class="asset-image" rel="lightbox" href="<$mt:AssetURL$>">に変更します。
