xoopscubeでのコンテンツ作成において質問です。

オンマウスで画像がポップアップするページをtinydモジュール内で作成したいのですが
作成方法を教えてください。
ヒントとなるサイト紹介でも結構です。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:
  • 終了:2009/08/22 16:30:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

ポイント60pt

以下のページで紹介されているCSSを使ってポップアップを実現する方法を使ってみてはいかがでしょう。

http://garage.mods.jp/ex/css-popup/

CSSソース

.popup img.pop {

display:block;

top:-10000px;

left:-10000px;

position:absolute;

}

.popup a:hover {

position:relative;

}

.popup a:hover img.pop {

top:-256px;

left:0;

}

このソースをおなじみの「<style type="text/css"><!--」と「--></style>」で囲んで、tinydのモジュールの一般設定の「全コンテンツ共通HTMLヘッダ」に指定します。

ポップアップする画像の表示位置は、「.popup a:hover img.pop」に指定している「top」と「left」で変更できます。

※コンテンツ(ページ)ごとに違う表示位置にしたい場合は、コンテンツの作成または編集時に「HTMLヘッダ」に指定してください。


HTMLソース

<div class="popup">

<a href=""><img class="pop" width="128" height="128" alt="firefox icon" src="http://garage.mods.jp/blog/image/icns/firefox.png" /><img width="128" height="128" alt="サムネイル" src="http://garage.mods.jp/blog/image/icns/firefox.png" /></a>

</div>

後は、コンテンツの編集エリアに上記のようになるようにHTMLを記述するといいです。

※上がポップアップで表示される画像で、下が最初から表示される画像です。

イメージマネージャーで挿入した後で、通常のimgタグに変更すれば良いと思います。

※両方の画像をdivとaタグで囲んでいる事と、divとimgへのクラス指定に注意してください。

id:kaji0245

ご丁寧な回答、感謝申し上げます。

早速、試してみます<( _ _ )>

2009/08/16 13:20:54
  • id:rouge_2008
    Firefox3、Safari4、Google Chromeでは大丈夫でしたが、IE6と7、Operaではポップアップされる画像が離れすぎていたので、CSSハックで対処してください。
    (※IE8は未検証)

    IE6および7用
    top:-256px;
    /top:-141px; // これを追加(※115くらい引いた値を指定すると、他のブラウザと大体同じ位置に表示されます。)

    Opera用(※他のブラウザ用の指定より下に追加)
    .popup a:hover img.pop:not(\*|*) {
    top:-141px;
    }


    参考:
    http://d-lover.com/css/hack.shtml
    http://d.hatena.ne.jp/momizine/20090108/1231397816
  • id:rouge_2008
    以下のページで紹介されている「imgPreview」のようなjQueryのプラグインを使用すると、もっと見た目が綺麗に感じると思います。
    http://steel-plate.jp/blog/2009/01/28/307/

    作者ページ:http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
    デモページ:http://james.padolsey.com/demos/imgPreview/full/

    まずは「imgpreview.min.0.22.jquery.js」と「jquery.min.js」をダウンロードます。
    そして、XOOPSのルートフォルダ内にある「common」フォルダ内にフォルダ「imgpreview」を作成して、その中にダウンロードしたjsファイルをアップします。

    次に、以下のページを参考にして、編集用の空のテンプレートセットを作成してください。
    (※既に作成してある場合は、そのテンプレートセットを編集します。)
    XOOPSの正しいテンプレートカスタマイズ方法
    http://www.xugj.org/modules/xpwiki/?正しいテンプレートカスタマイズ方法

    準備が出来たら、カスタマイズ用の「tinycontent0_index.html」を編集します。
    一番下(最後の<{/if}>より下)にimgPreviewのjsとカスタマイズしたjsの記述を入れます。
    ※ここではデモの「Fading + CSS Styles」をそのまま使用しています。
    (※thirdというidのul内でリンクされた文字列または画像にマウスオーバーすると画像が表示されます。)

    <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: 200
    },
    // 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>

    ※互換モジュールの「全般設定」で「デフォルトのテンプレート・セット」に作成したテンプレートセットを指定するのを忘れないでください。
    ※表示される画像が小さすぎる場合は、「// Limit preview size:」の「height: 200」を任意の値に変更します。


    さらにjQueryを呼みこむ記述と表示用のCSSは、tinydのモジュールの一般設定の「全コンテンツ共通HTMLヘッダ」に指定します。
    <script src="http://ドメイン名/xoops/common/imgpreview/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    /* CSS: (StyleSheet) */

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

    ※例で示した2つのjsファイルを読み込むURLは、「ドメイン/xoops」がXOOPSのルートフォルダの場合ですので、ご自分の環境に合わせて変更してください。

    あとは、コンテンツ作成時に、以下のようにidがthirdのulリスト内に画像へのリンクをコンテンツの本文内に記述します。

    <ul id="third">
    <li><a href="ポップアップ表示する画像のURL1"><img src="サムネイル画像のURL1" /></a></li>
    <li><a href="ポップアップ表示する画像のURL2"><img src="サムネイル画像のURL2" /></a></li>
    <li><a href="ポップアップ表示する画像のURL3"><img src="サムネイル画像のURL3" /></a></li>
    </ul>

    リストにしないで以下のようにしたい場合は、「$('ul#third a')」を「$('div#popimg a')」にすることで可能です。
    <div id="popimg">
    <a href="ポップアップ表示する画像のURL1"><img src="サムネイル画像のURL1" /></a><br />
    <a href="ポップアップ表示する画像のURL2"><img src="サムネイル画像のURL2" /></a>
    </div>


    他にもjQueryを使用したプラグインなどjsを使う物でも、気に入った物があったらいろいろ試してみてください。
    コンテンツ本文内にjsを記述するタイプは無理だと思いますが、imgPreviewのようにヘッダ内とページ下部にだけjsを記述するタイプの場合は、テンプレート等に記述すれば使用できる可能性があります。
  • id:rouge_2008
    度々すみません。
    「imgPreview」の場合、こちらの環境ではIEでページが表示されない問題が発生しました。
    他の人の環境でもIEでは表示されない可能性がありますが、どうしてもこのプラグインを使用したい場合は、次の方法でIEだけ対象外にしてみてください。
    jqueryを読み込む記述を以下のようにすると、IEだけ画像のポップアップ表示が無効になります。
    <![if !IE ]>
    <script src="http://ドメイン名/xoops/common/imgpreview/jquery.min.js" type="text/javascript"></script>
    <![endif]>

    あるいは、「imgPreview」をあきらめて、一番最初にご紹介したCSSによる方法を使用してください。
    「.popup a:hover img.pop」に以下の2行を追加すると、「imgPreview」のように画像に枠が表示されます。
    (※ただし、ラウンドはされません。「imgPreview」もラウンドされるのは一部のブラウザだけですが・・・)
    background-color:#222;
    padding:16px;

    あるいは、次のプラグインでも画像のポップアップ表示が可能です。
    IEを含む主要なすべてのブラウザで表示可能でしたが、こちらもラウンドはされません。

    「Example 2: Image Preview Gallery」を確認してください。
    http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
    ※aタグにクラス名「preview」をつけた画像すべてが対象になります。
    ※そのままだと枠が細いですが、「#preview」の「padding:5px;」を「padding:15px;」とすると「imgPreview」と大体同じ太さになります。
    ※CSSの表記は「#preview」の指定だけあれば大丈夫です。
    ※表示位置は、「main.js」の「xOffset = 10;」と「yOffset = 30;」を変更すると調整できます。

    CSSだけで実装する場合とほぼ同じ表示なので、わざわざこのプラグインを使う必要はないかもしれませんが・・・
    ※一応、画像にタイトルをつけて表示することも出来ます。
  • id:rouge_2008
    「imgPreview」と「Example 2: Image Preview Gallery」の併用方法をトラックバックしました。
    個人的に「imgPreview」の表示効果が気に入ったので・・・(^^;
    良ければご確認ください。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません