vtipを使って、コメント主のブログのサムネイルを表示してみる
こんな感じで、コメント投稿者の名前欄にマウスをホバーすると、vtip内にその方のブログのサムネイルが表示されます。（くままるさん、勝手に使っちゃってスミマセン）
どちらかと言えば「アメーバ会員のみコメント可」のブログ向けですが、そうでない場合も大丈夫です。
今回は、前回の記事で紹介したプラグイン「vtip」と、「サムネイル取得サービス」という素晴らしいwebサービスを利用しています。
では早速手順を紹介します！
vtipに変更を加える
今回は、このvtipに少し手を加えます。
●その1
まず、$を全てjQueryと書き換えます。
例）$(".vtip").unbind().hover( ←これを jQuery(".vtip").unbind().hover( ←こうする
●その2
this.yOffset = 10; // y distance from mouse
コレを
this.yOffset = 30; // y distance from mouse
こうします。
●その3
this.t = this.title;
コレを、
this.t = this.title;
this.t = String(this.t).replace(/img\$/g,"<img class='blothum' src='");
this.t = String(this.t).replace(/\$img/g,"' alt='' width='128' height='128'/>");
こうします。
●その4
最後に一番下の
jQuery(document).ready(function($){vtip();});
コレを
//jQuery(document).ready(function($){vtip();});
こうします。(要するに、コメントアウトするだけです)
これでvtipの準備は終わりです。
サムネイル取得サービスにリンクを貼る
これはどこでもいいんですが、必ず見えるようにhttp://hinadoll.net/へのリンクを貼ってください。
リンクには「サムネイル取得サービス」という文字列が含まれていないと利用できません。
フリープラグインに貼る
まずvtipを導入しないといけないのですが、それは前回の記事を参考にしてください。
vtipを導入したら、
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/27/2a/10015027244.css"></script>
とフリープラグインに貼ってください。
これで完成です！