2017-08-18 3 views
1

以下は、各製品の横に小さなサムネイル(35x35ピクセル)を含む複数行の商品を表示するために使用するコードの一部です。私が作成した管理ページは、製品管理用のスプレッドシートとよく似ています。onmouseoverを使用してwp_get_attachment_imageを使用して画像サイズを変更する

すべてがうまくいきますが、私は大きな画像を表示するためにクライアントに「マウスオーバー」したいと考えています。画像の拡大を実現するために「onmouseover」やCSSを使用する方法を理解していますが、通常は従来の<img src... >要素を使用しています。

同じ効果を出すためにwp_get_attachment_imageを変更またはタップすることは可能ですか?私は単純にコードを<img>要素に貼り付けることはできません。なぜなら、その "not there"という言葉は、(私の用語が不足して申し訳ありませんが、これは私が扱える静的なコードではなく関数であると仮定して)入力するためです。

または、アレイを設定しないでください(35,35)、特定のサイズのコンテナをイメージにしてイメージの変更を行うには、そのコンテナを塗りつぶしてください(<li>)。

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li style="display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;">' . $thumbimg . '</li>'; 
    } 
} 

答えて

1

私は2種類の方法で前にこれをやった: (注意私はあなたのインラインCSSを移動しました:背景画像

PHPなど

1.表示画像をそれは簡単に)コードの変更を確認するために作る

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image_src($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer" style="background-image:url('.$thumbimg[0] .')"></li>'; 
    } 
} 

CSS:

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer:hover{ 
    background-size: 105%; 
} 

2.オーバーフロー: "作物" にコンテナ要素に隠された画像

PHPの可視部分:

if ($attachments) { 
    foreach ($attachments as $attachment) { 
     $thumbimg = wp_get_attachment_image($attachment->ID, array(35,35)); 
     $productlist .= '<li class="prodimgcontainer">' . $thumbimg . '</li>'; 
    } 
} 

CSS:

.prodimgcontainer{ 
    width: 35px; 
    height: 35px; 
    overflow: hidden; 

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px; 
} 
.prodimgcontainer img{ 
    width: 35px; 
} 
.prodimgcontainer img:hover{ 
    width: 39px; 
    height: 39px; 
    /* move the position of the image slightly so it remains centered */ 
    margin-top: -2px; 
    margin-left: -2px; 
} 

このパーセンテージでも動作しますが、固定幅の画像として、私はそれらの寸法を使用して、何が起こっているのかがはっきりしています。

注:

これらの例は、私が行っている作業に基づいており、その概念はどちらの場合にも有効であり、動作するはずです、しかし、私は私の頭の上から上記の彼のコードの変更を加えましたそれはテストされていません。

オプション1を使用すると、特に画像のサイズが違う場合や応答が必要な場合に、画像を扱いやすくなりました。

+1

これは完璧です!オプション1は、コンテナやそのラインに沿って何かを塗りつぶしたいと思って行った後、「ホバー」しました。これが大好き! – LITguy

関連する問題