如何创建简单的图像滑块/手风琴？ [英] how to create simple image slider / accordion ?

问题描述

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

In wordpress pages is there a plugin for vertical images..

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

I want a web page which should look like as follows:

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

In this there a main panel Products .And which has images as accordions..

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

Only 10% of the image is visible..but onclick of the image1 It should expand 100% as follows :

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

And the main thing is..These images user should be able to put in WP pages

静态可能..显示在这个

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

but i want it to be edited in the page or ..some othe way ..may be in one folder..

有可能吗？
有没有一个可以帮助我的插件？
或者如果我需要代码那么
可以任何人给我关于相同的想法......？

Is it possible? Is there a plugin which will help me out ? or else if i need to code for that then can anyone give me idea regarding same...?

推荐答案

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

Here is your simple jQuery slider/accordion:

你可以从这里检查（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（：

Note: You can use this on everything, just need to initialise jQuery (:

这篇关于如何创建简单的图像滑块/手风琴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！