にゅーんとシームレスに伸びる！ いやね、ずっとこれがやりたいと思ってたんすよ。
Movable Type 5に標準搭載されている「画像をクリックで拡大」機能はいまいち使い勝手が良くないため、大きめの画像はあらかじめ縮小したものをアップロードしたりしていた当blogですが、ようやく格好いい拡大機能がつきました。
Highslide JSというjavascriptライブラリを使ったら思ったよりえらいあっさりと実装できてしまい「こんなことならさっさとやっておけば良かった」と後悔することしきり。調べたらなんか実装方法が難しげに書いてあるサイトばかりヒットして腰が引け気味だったんですが、サンプルのソースを見てみたらスタイルシートに何行か追加してエントリーに貼り付ける画像タグいじれば動くじゃないかと。
以下簡単に解説兼メモ
-
1．Highslide JSからライブラリをダウンロード
2．ファイルを解凍してhighslideフォルダをblogと同じフォルダにアップロード
3．Movable Typeのメニューからデザイン→テンプレート→テンプレートモジュール→HTMLヘッダーを開いて以下の文字列をコピー&ペースト
<script type="text/javascript" src="<$mt:BlogURL$>/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>/highslide/highslide.css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>/highslide/highslide-ie6.css" /><![endif]-->
<script type="text/javascript">
//<![CDATA[
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.graphicsDir = '<$mt:BlogURL$>/highslide/graphics/';
hs.wrapperClassName = 'borderless';
//]]>
</script>
4．エントリー内の画像にHighslideを適用して表示する場合は以下のようにタグを記載します
<div>
<a href="[画像ファイル名]" class="highslide" onclick="return hs.expand(this)">
<img src="[画像ファイル名]" alt="[画像ファイルの説明]" title="クリックで拡大します" width="[縮小表示時のサイズ]" /></a>
<p class="highslide-caption">[画像ファイルの説明]</p>
</div>
-
まあ、ほぼHighslide同梱のサンプルのままなんですけど。
このほかにもポップアップ方法等に色々なバリエーションが用意されていますので、サンプルを参考に書き換えてみてください。
コメントする