Jquery 如何创建简单的图像滑块/手风琴？

在wordpress页面中有一个垂直图像插件

我想要一个如下所示的网页：

这里有一个主面板产品，其图像如手风琴

只有10%的图像可见。但单击image1后，图像应扩展100%，如下所示：

最主要的是..这些图像用户应该能够放入WP页面

可能是静态的..如中所示

但是我希望它可以在页面中编辑，或者..以其他方式..可以在一个文件夹中

可能吗？ 有一个插件可以帮我吗？ 或者如果我需要编码的话

---

有谁能告诉我关于相同的…？

这是您的简单jQuery滑块/手风琴：

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:

---

注意：您可以在任何情况下使用它，只需要初始化jQuery（：

如果你想使用css3，这里有一个完美的例子：谢谢barlasapaydin.它的图像水平滑动..我想要相同但垂直..我不熟悉jquery中的编码..plzz..是的，是的，我在尝试..我几乎成功了..上面的代码显示了图像，但在鼠标悬停时它没有得到最大化）我得走了，伙计对不起，我需要吃点东西。

<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>

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