マウスオーバーで画像をポップアップ表示

連絡用 XOOPS

http://q.hatena.ne.jp/1250321181
先日上記の質問に回答しましたが、私の環境ではIEでだけ紹介したjQueryのプラグインが使用できないという結果に・・・
IEだけはどうやってもXOOPS(TinyD？)で表示エラーになってしまいます。
FirefoxやSafariでは枠がラウンドされる点や画像が表示されるまでの効果が個人的に気に入っているので、なるべく「imgPreview」を使う方法を考えてみました。
そこで、既にご紹介済みの2つのプラグインを併用するという妥協案を提案します。
FirefoxやSafariなどIE以外のブラウザでは「jQuery plugin:‘imgPreview'」、IEだけ「Easiest Tooltip and Image Preview Using jQuery(Image Preview Gallery)」を使用する方法です。

「imgPreview」と「Image Preview Gallery」の併用方法

※XOOPSのTinyDモジュール内で併用する方法です。

まず各サイトにアクセスして、必要なファイルをダウンロードします。

テンプレートを編集する必要がありますので、カスタマイズ用のテンプレートセットを作成したことがない人は、空のテンプレートセットを作成してください。
Xoops Users Group Japan - 正しいテンプレートカスタマイズ方法 [基本知識] - XUGJ Wiki

モジュールまたはALTSYSのメニューの「テンプレート管理」で作成済みのテンプレートセットの「tinycontent0_index.html」を編集します。
次のソースをそのまま一番最後(<{/if}>の後ろ)に追加します。*1
※「<![if !IE ]>」〜「<![endif]>」の間に記述して、IE以外のブラウザで読み込むようにしています。

<![if !IE ]>
<script src="http://ドメイン名/xoops/common/imgpreview/imgpreview.min.0.22.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($){

$('ul#third a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 240
},
distanceFromCursor: {
top:-80,left:50
},
// When container is shown:
onShow: function(link){
// Animate link:
$(link).stop().animate({opacity:0.4});
// Reset image:
$('img', this).stop().css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
$(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
$(link).stop().animate({opacity:1});
}
});

})(jQuery);
//]]>
</script>
<![endif]>

ポップアップの表示位置の調整は、「distanceFromCursor:」の「top」と「left」で行います。

次に、tinydのモジュールの一般設定にある「全コンテンツ共通HTMLヘッダ」を編集します。
※コンテンツごとに指定したい場合は、コンテンツ作成時でもかまいません。*2
次のソースをそのまま貼り付けてください。
※「main.js」を読み込む記述を「<!--[if IE ]>」〜「<![endif]-->」の間に記述して、IEだけで読み込まれるようにしています。

<script src="http://ドメイン名/xoops/common/imgpreview/jquery.min.js" type="text/javascript"></script>
<!--[if IE ]>
<script src="http://ドメイン名/xoops/common/imgpreview/main.js" type="text/javascript"></script>
<![endif]-->
<style>
<!--
img{border:none;}

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:15px;
    display:none;
    color:#fff;
}

#preview img {
max-height:240px;
}
-->
</style>

<style type="text/css">
<!--
#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}
-->
</style>

ダウンロードした「main.js」を開いて編集します。
14、15行目の「xOffset」と「yOffset」で表示位置を調整します。
21行目と35行目の「$("a")」の部分を次のようにして、「imgPreview」と同じタグが対象になるようにします。

$("ul#third a")

28行目の次に以下の行を追加します。(※これは表示される画像の大きさ(枠も含む)の指定です。

			.css("max-height","270px")

※上記の指定を変更したい場合は、「全コンテンツ共通HTMLヘッダ」で指定した次の値も変更してください。 ※以下の値に枠の分の30pxを足した値を上記「main.js」で指定すると良いです。
#preview img {
max-height:240px;
}
※「imgPreview」にも画像の大きさ指定がありますので、そちらも合わせて変更してください。

30行目「.fadeIn("fast");」の値を変更するとゆっくり表示させることが出来ます。
「.fadeIn("slow");」と指定すると「imgPreview」に動作が少しだけ近づくと思います。
※参考ページ：
fadeIn([speed], [callback]) - jQuery 1.3.2 日本語リファレンス

最後に、XOOPSのルートフォルダ→「common」フォルダ内に適当なフォルダ「imgpreview」を作成して、その中にダウンロードした3つのjsファイルをアップロードします。

imgPreviewでローダー画像を使用する

ちなみに「#imgPreviewWithStyles」の「background」に画像を指定すると、画像が表示されるまでのローダー画像を表示することが出来ます。

    background: #222 url("http://ドメイン名/xoops/images/ajax-loader2.gif") no-repeat center;

用意した画像は、XOOPSのルートフォルダ→「images」にアップロードしてください。
以下のサイトで簡単にロード用の画像を作成できます！(^▽^*)
Ajaxload - Ajax loading gif generator

*1:3番目のサンプル(CSSによる枠表示有り)を使用する場合です。

*2:その都度指定するのは面倒だと思いますので、全コンテンツ共通にすることをおすすめします。