以前、Movable Type 4 で Highslideを利用する方法を こちらのエントリーで記述しました。
さらに、Movable Type（ムーバルタイプ）の画像（ファイルのアップロード）挿入作業にて、Highslide JS用のアトリビュート（タグ）を自動で、吐き出すようにカスタマイズする方法をこちらのエントリーで記述しました。
いつも、お世話になっている、「marutyu」さんから、画像を閉じて他の画像を開き直す手間をなくして欲しい旨の要望がありました。
marutyuさん、簡単に出来ますよ！コントローラーを付けるだけなんです！
って事（どう言う事？）で、Part2でアトリビュート（タグ）を自動で吐き出すようにカスタマイズした部分を手直し、
キャプションにコントローラーを追加するタグの自動生成をすることにします。
まずは、おさらいから。
1ページに複数の画像を表示し、画像にキャプション （タイトル） を表示する場合のHighslide JS基本タグ
|
<a href="1枚目の画像ファイルのURL" id="thumb1" class="highslide" onclick="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb1"><p>1枚目のタイトル</p></div>
<a href="2枚目の画像ファイルのURL" id="thumb2" class="highslide" onclick="return hs.expand(this)">
<img src="2枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb2"><p>2枚目のタイトル</p></div> |
でしたね。
Movable Type 4 での埋め込み画像 HTML生成タグは、下記のようになっています。
| <a href="画像ファイルのURL"><img alt="画像ファイル名" src="画像ファイル（サムネイル）のURL" width="サムネイル画像幅" height="サムネイル画像縦" /></a> |
上記のタグを以下のようにHTMLコードが生成されるように変更しなければなりませんでしたね。
|
<a href="1枚目の画像ファイルのURL" id="1枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="1枚目の画像埋め込み時に指定したラベル" /></a>
<div class="highslide-caption" id="caption-for-1枚目の画像ファイル名"><p>1枚目の画像埋め込み時に指定したラベル</p></div>
<a href="2枚目の画像ファイルのURL" id="2枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)">
<img src="2枚目のサムネイル画像のURL" alt="2枚目の画像埋め込み時に指定したラベル" /></a>
<div class="highslide-caption" id="caption-for-2枚目の画像ファイル名"><p>2枚目の画像埋め込み時に指定したラベル</p></div> |
キャプションに画像コントロールを追加する場合は、この部分を
|
<a href="1枚目の画像ファイルのURL" id="1枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="1枚目の画像埋め込み時に指定したラベル" /></a>
<div class='highslide-caption' id='caption-for-1枚目の画像ファイル名'>
<a href="javascript:void(0)" onclick="return hs.previous(this)" class="control" style="float:left; display: block">Previous<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px">Next<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small></a>
<a href="javascript:void(0)" onclick="hs.close(this)" class="control" style="float:right; text-align: right; margin-left: 50px">Close</a>
<a href="javascript:void(0)" class="highslide-move control" style="float:right; text-align: right;">Move</a>
<div style="clear:both"></div>
<center><p><b>1枚目の画像埋め込み時に指定したラベル</b></p></center>
</div>
<a href="1枚目の画像ファイルのURL" id="2枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="2枚目の画像埋め込み時に指定したラベル" /></a>
<div class='highslide-caption' id='caption-for-2枚目の画像ファイル名'>
<a href="javascript:void(0)" onclick="return hs.previous(this)" class="control" style="float:left; display: block">Previous<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px">Next<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small></a>
<a href="javascript:void(0)" onclick="hs.close(this)" class="control" style="float:right; text-align: right; margin-left: 50px">Close</a>
<a href="javascript:void(0)" class="highslide-move control" style="float:right; text-align: right;">Move</a>
<div style="clear:both"></div>
<center><p><b>2枚目の画像埋め込み時に指定したラベル</b></p></center>
</div> |
のように、変更する必要があります。
埋め込み画像生成ファイルPerlスクリプト
Movable Type 4 では、「lib」フォルダ＞「MT」フォルダ＞「asset」フォルダ＞image.pm ファイルの中にあります。
今回のカスタマイズの概要です。
- デフォルトで生成されるコードをHighslide JS用のアトリビュート（属性）で生成されるように生成HTMLの変更
image.pmファイルを修正する前に、必ずバックアップを取っておいてください。
修正ミスにより、mt4自体が動作しなくなる可能性があります。
動作しなくなった場合、バックアップファイルを戻す事により、元通りに動作するようになります。
動作しなくなった場合、当方では一切関知しませんので、自己責任でお願いします！
image.pmファイル修正
埋め込み画像（サムネイルを利用）HTML生成は、sub as_htmlになるようです。
デフォルトでは、下記のようになっています。
if ( $param->{thumb} ){
$text = sprintf(
'<a href="%s"><img alt="%s" src="%s" %s %s/></a>',
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style, |
上記コードを、Part2で下記のように変更しましたね。
if ( $param->{thumb} ){
$text = sprintf(
'<a class="highslide" onkeypress="return hs.expand(this)" id="%s" onclick="return hs.expand(this)" href="%s">
<img alt="%s" src="%s" %s %s /></a>
<div class="highslide-caption" id="caption-for-%s">
<center><p><b>%s</b></p></center></div></p>',
$myalt,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style,
$myalt,
MT::Util::encode_html( $asset->label ), |
上記部分を、下記のように変更します。
|
if ( $param->{thumb} ){
$text = sprintf(
'<a href="%s" id="%s" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="%s" alt="%s" %s %s /></a>
<div class='highslide-caption' id='caption-for-%s'>
<a href="javascript:void(0)" onclick="return hs.previous(this)" class="control" style="float:left; display: block">Previous<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px">Next<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small></a>
<a href="javascript:void(0)" onclick="hs.close(this)" class="control" style="float:right; text-align: right; margin-left: 50px">Close</a>
<a href="javascript:void(0)" class="highslide-move control" style="float:right; text-align: right;">Move</a>
<div style="clear:both"></div>
<center><p><b>%s</b></p></center>
</div>',
MT::Util::encode_html( $asset->url ),
$myalt,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
$dimensions,
$wrap_style,
$myalt,
MT::Util::encode_html( $asset->label ), |
各img画像とキャプションのid指定に、Part2同様に、$myaltを設定しています。
キャプションにコントローラーを追加する方法が完了です。
コメントする