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

Question

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

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

在这里有一个主面板产品。并且有手风琴图像..

只有10％的图像可见..但是点击 image1 它应该扩展100％，如下所示：

主要的是......这些图片用户应该可以放入 WP页面

静态可能..如this

所示

但是我希望它能够在页面中进行编辑或者..某些方式..可以在一个文件夹中..

有可能吗？ 有插件可以帮助我吗？ 或者如果我需要为此编码 任何人都可以给我相同的想法......？

Answer 1

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

You can inspect from here (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（：