Movable Type 備忘録

 EffectBox with jQuery

  • Dec142008
  • Vote:
    http://bizcaz.com/archives/2008/12/14-232018.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

時間がないのでサクサクっと説明します。
わたしが作ったプラグインですが、Movable Type の「画像の挿入」で出力されるコードから Highslide または shadowbox を識別して表示するプラグインです。

サンプルを表示できませんでした。

面倒くさがりなわたしは、MT のアップグレードの度に画像挿入のコードを書き換えるのが邪魔になってきたので、いっそうのことデフォルトのコードを jQuery を使って書き換えちゃえっ (●＞∀＜●) っていう発想です。

[2008.12.15] クロスブラウザ対応したよ。 もぅ Safari でも Opera でも何でもこいやぁ!! ってかんじです (●´∀｀●) ♪
ついでにサポートするエフェクトライブラリも増やしちゃった。
後は各エフェクトライブラリ個別のオプションを渡す I/F を検討します。

[2008.12.15] 何だかこのプラグインぜんぜんダメぽ （つω-`｡）今度は Safari だと Highslide が動作しなくなっちゃってる。

  1. 外部ライブラリ( JavaScript )を読込むときは必ず!? document.write を使わないとダメっぽい。でも、document.write の仕様上 jQuery の ready イベント内から実行するとページが上書きされちゃうから根本的に考え直さないと。

  2. Safari では img タグを Highslide 用に replaceWith で書き換えても期待する動作しないみたい。Safari の場合「置き換える」という発想が通用しない!?
    厳密にはちゃんと置き換わってるんだけど、置き換わっても Highslide が認識してくれてない。( shadowbox は HTML ヘッダにさえロードを済ませておけば後の置き換えは問題なし )

上記は何れも Safari での動作ですが、たぶん Google Chrome もダメかもね。Firefox では問題なく表示されてます。

任意の場所からプラグインを呼び出す( 関数を呼び出す )分には document.write も使えるので問題ないのですが、ready イベント内からキーワード検索してその要素書き換えってのが無理あるのかも。
考えが甘かったかな。要検討です。

対応ライブラリ

ダウンロード

使い方

自動識別といっても、何らかのキーワードを埋め込む必要があるわけですが、使い方はカンタンです。
MT の「画像の挿入」で挿入されるコードは以下のようなものですね。

画像の挿入で追加されるコード例

  1. <form mt:asset-id="999" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="●●●" src="http://●●●.com/image/xxx.png" width="480" height="360" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></form>

上記コード中に highslide を使って表示させたい場合には「eb:highslide」というキーワードを追加するだけです。
具体的には以下のようになります。

Highslide で表示させる例

  1. <form mt:asset-id="999" class="mt-enclosure mt-enclosure-image eb:highslide" style="display: inline;"><img alt="●●●" src="http://●●●.com/image/xxx.png" width="480" height="360" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></form>

青字の部分を追加するだけです。 あとは普通に記事を書いて頂くだけです。

shadowbox で表示させたい場合には以下のようになります。

shadowbox で表示させる例

  1. <form mt:asset-id="999" class="mt-enclosure mt-enclosure-image eb:shadowbox" style="display: inline;"><img alt="●●●" src="http://●●●.com/image/xxx.png" width="480" height="360" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></form>

先ほどと同様青字の部分を追加します。

テンプレートの修正

HTML ヘッダ中に以下を追加します。

HTML ヘッダ修正

  1. <script src="http://www.google.com/jsapi"></script>
  2. <script>google.load("jquery", "1.2.6")</script>
  3. <script type="text/javascript" src="<$MTBlogURL$>js/jquery.effectbox.js"></script>

基本的には上記を追加するだけです。
特に Highslide の JavaScript の読込みを行わなくっていいです。勝手にプラグインがやりますから (●´∀｀●)

ただし、shadowbox を併用したい場合には以下のように正しく追加する必要があります。 shadowbox の併用でも大丈夫になりました。利用したいライブラリについて以下のように HTML ヘッダ中に記述します。

ライブラリの初期化

  1. <script type="text/javascript">
  2. $.fn.EffectBox.init({
  3. /*
  4.  * Highslide JS 初期化
  5.  */
  6. 'highslide' : {enable: true, base: 'highslide' },
  7. /*
  8.  * shadowbox 初期化
  9.  */
  10. 'shadowbox' : {enable: true, base: 'shadowbox' },
  11. /*
  12.  * FaceBox 初期化
  13.  */
  14. 'facebox' : {enable: true, base: 'facebox' },
  15. /*
  16.  * prettyPhoto 初期化
  17.  */
  18. 'prettyPhoto' : {enable: true, base: 'prettyPhoto' },
  19. /*
  20.  * FancyZoom 初期化
  21.  */
  22. 'fancyZoom' : {enable: true, base: 'fancyZoom' },
  23. });
  24. </script>

青字の部分のように使いたいライブラリの有効( true )／無効( false )を設定します。デフォルトは無効です。
緑字はオプションで各ライブラリのインストール先の URL を指定してください。デフォルトでは EffectBox/ フォルダ内に上記フォルダ名称でインストールされてるものとしてます。

また、ライブラリの初期化は各自で使う分だけ初期化した方がいいです。 使いもしないのに初期化しても表示のパフォーマンスを損なうだけですから。

以上です。
また時間の合間みて実装を検討してみたいと思います。不具合などありましたらご連絡頂けると嬉しいです (●´∀｀●)

課題

  • 「画像の挿入」で追加でできるサムネイルの対応と、ポップアップの除外する。
  • shadowbox をコード中からロードできるようにする。
    でもちょと無理っぽい気もするけど･･･。 [2005.12.15] 対応しました。
  • いろんな( 気に入った )Lightbox 系のライブラリに対応する。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード