イメージヘルパー ver 0.01
(sb開発研究所)
イメージヘルパーは、記事編集画面などで利用できる「イメージ挿入」セレクタの形式を自由にカスタマイズするプラグインです。
ぬわんとー。すごいプラグインが公開されました。
これで拙作のThumnPopやAddrelプラグインは不要になりましたね...。
(*)プラグインのブッキングを避けるためにイメージヘルパーを利用する場合はThumnPopやAddrelの利用チェックを外したほうがよいかと思います。
ん？「イメージ挿入」の「新規」から直接ファイルをアップロードした場合、イメージヘルパーのテンプレートは適応されないみたい？
適応させるには編集メニューのアップロードから画像を追加するか、新規で直接アップロードした後、いったん挿入されたタグを消して挿入する画像を選び直すと適応されます。
さて、ついでなので挿入タグの作成が面倒な
highslide JSのテンプレートを作ってみた。
HighSlide JSを利用するための挿入タグは
<a href="イメージ画像ファイルアドレス" class="highslide" onclick="return hs.expand(this)"><img src="イメージ画像ファイルアドレス" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="100" heigh="100" id='thumb1' /></a>
<div class='highslide-caption' id='caption-for-thumb1'>
<p> キャプション</p>
</div>
こういうものなのだが、画像を利用するたびに作成するのは面倒。
ってことでイメージヘルパーのテンプレートを使うと
Exif情報無し
<a href="%file_url%" class="highslide" onclick="return hs.expand(this, {captionId: 'caption%file_width%%thumb_height%'})">
<img src="%thumb_url%" alt="%image_name%" title="Click to enlarge" height="%thumb_height%" width="%thumb_width%" /></a>
<div class='highslide-caption' id='caption%file_width%%thumb_height%'>
%image_name%
</div>
こんな感じになる。
(*)IDは元画像の横幅とサムネイル画像の縦幅をくっつけただけなので元画像のサイズが同じ画像の場合はIDが重複しますので注意です。
・Sample
ミルククラウン
画像使用:[>>
ゆんフリー写真素材集]
highslide JSのインストール自体は
[>>
Highslide JS-サムネール画像を拡大表示するスマートなjavascript - WEBデザイン BLOG]
こちらを参考にしました。
＜＜続きを隠す 
![Fate/stay night [Realta Nua] 応援バナー](http://www.fate-ps2.com/realta_nua/banner/img/realta_s_hetarerin.jpg){kind=small}
RSS1.0