TopJavaScriptHighslide JS > 2009年8月
2009年8月19日

CommentCustomField プラグイン + HighSlide JS

Movable Type のコメントにカスタムフィールドを追加する CommentCustomField プラグインHighSlide JS を組み合わせて、アップロードした画像をズームアップするカスタマイズを紹介します。

以下のサンプルページで画像をクリックして動作を確認してください。

サンプルページ

ここでは CommentCustomField プラグインの解説にしたがって、ブログ記事ページにアップロード画像を表示するカスタマイズを行なっていることを前提に説明を進めます。

1.HighSlide JS の設定

HighSlide JS の設定方法は、「Highslide JS でサムネイル画像を拡大表示する 」を参照してください。本エントリーでの解説は省略します。

2.テンプレートの修正

ブログ管理画面の「デザイン」→「テンプレート」をクリックし、「既定のブログ」の場合は「コメント」テンプレートモジュールをクリック、当ブログの配布テンプレートの場合は「コメント詳細」テンプレートモジュールをクリックし、赤色部分を青色の内容に変更します。

変更前

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <mt:AssetThumbnailLink width="200" />
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

変更後

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <a href="<mt:AssetURL />" class="highslide" onclick="return hs.expand(this)"><img src="<mt:AssetThumbnailURL width="100" />" /></a>
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

ズーム前のサイズを変更する場合は、width="100" の部分を書き換えてください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3