-1

アイテムに応じてポップアップを作成したい。表示されるテキストは、各アイテムに応じてデータベースから取得されます。具体的には、次のコードがあります。 

{foreach $images as $item}
        <div class="icoana" id="container">
                    <a href="{base_url()}assets/image/{$item->code}/{$item->name}" class="fancybox" rel="gallery" title="{$item->title}"><img  class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}"></a>

                    <div class="detalii">
                        <table style="font-size: 25px">
                           <tr><td>Nume:</td><td>{$item->title}</td> </tr>
                           <tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr> 
                           <tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
                        </table>   
                    </div>

                    <div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai  multe...</div>

        </div>
{/foreach}

マウスオーバーすると、にdiv class="despre"保存されているテキストの説明を含むポップアップが表示され{$item->description}ます。次のようにしたいポップアップ: http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/ .例またはソースへのリンクを希望しますコード。

4

1 に答える 1

1

大まかに、あなたがする必要があるのは2つのステップです

1) 上記の div のすぐ下にある php コードの div の説明を出力します。

したがって、コードは次のようになります。

{foreach $images as $item}
        <div class="icoana" id="container">
                    <a href="{base_url()}assets/image/{$item->code}/{$item->name}" class="fancybox" rel="gallery" title="{$item->title}"><img  class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}"></a>

                    <div class="detalii">
                        <table style="font-size: 25px">
                           <tr><td>Nume:</td><td>{$item->title}</td> </tr>
                           <tr><td>Lungime:</td><td>{$item->width}&nbsp cm</td> </tr> 
                           <tr><td>Latime:</td><td>{$item->height}&nbsp cm</td></tr>
                        </table>   
                    </div>

                    <div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai  multe...</div>
                    <div class="desc" style="display:hidden">
                          {$item->description} 
                     </div>
        </div>
        {/foreach}

2）その後、上記のリンクで同じコードを使用し、表示部分を変更します

$(function() {

        $('.despre').hover(function(e) {
           //Code to show the popup
           // Modify to use any standard popup library
           // The code below , for now display the desc only.
           $(this).next().show();

        }, function() {
          $(this).next().hide();
        });

      });

今のところ、これは div を表示および非表示にします。ポップアップを実際に表示するには、任意の ToolTip ライブラリを使用できます。

ここの例: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

よろしく

シュレヤス N

于 2013-03-03T20:23:01.543 に答える