0

ワードプレスのページには、縦長の画像用のプラグインがあります。

次のようなWebページが必要です。

ここに画像の説明を入力してください

これにはメインパネルの製品があります。これにはアコーディオンとしての画像があります。

画像の10％のみが表示されます。ただし、画像をクリックすると1次のように100％拡大されます。

ここに画像の説明を入力してください

そして主なものは..これらの画像ユーザーはWPページに入れることができるはずです

静的その可能性..これに示されているように

しかし、私はそれをページで編集したい、または..他の方法で..1つのフォルダにあるかもしれません..

出来ますか？私を助けるプラグインはありますか？または、そのためのコーディングが必要な場合は、誰かが同じことについて私にアイデアを与えることができますか？

4

1 に答える 1

0

簡単なjQueryスライダー/アコーディオンは次のとおりです。

ここから検査できます（jsfiddle）。

jQuery：

$('div').bind({
  click: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  /* if you want to do it with hover effects, just deactive click and use these:
  mouseenter: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  mouseleave: function() {
    $('div').stop().animate({'height':'100px'},600);
  }
  */
});​

html：

<div>
   <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" />
</div>

css：

div { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; }  ​

注：これはすべてに使用できます。jQueryを初期化する必要があります（：

于 2012-07-19T08:16:07.930 に答える