55961

how to create simple image slider / accordion ?

Question:

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

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

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/FkVxG.png" data-original="https://i.stack.imgur.com/FkVxG.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

In this there a main panel <strong>Products</strong> .And which has images as accordions..

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

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/sMyjQ.png" data-original="https://i.stack.imgur.com/sMyjQ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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

Static its possible ..as shown in <a href="http://tympanus.net/codrops/2011/07/22/vertical-sliding-accordion/" rel="nofollow">this</a>

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

Answer1:

Here is your simple jQuery slider/accordion:

<a href="http://jsfiddle.net/mjaA3/14/" rel="nofollow">You can inspect from here (jsfiddle).</a>

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; } ​

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

Recommend

  • intermittent error returning an internal reference with boost.python
  • Drawing at Cocoa with Swift Creates an error
  • Catch exception in ctypes based on C-exit code
  • How to divide the path into several segments?
  • Train corpus for NER with NLTK ieer or conll2000 corpus
  • send data back from jsp iterator to struts action class
  • Allocating a 2D contiguous array within a function
  • sudo easy_install for SimpleITK not that easy
  • If I am creating a simple client server application in IntelliJ, how should this work?
  • crash in __tcf_0
  • How to add closing tag for canvas in three js rendered Canvas?
  • Examples of how to a STS in .Net 4.5 using WCF
  • How can I get the choice “H2” back in the H2 consol?
  • there is no graph with tensorboard
  • CSS bleed-through with cfinput type=“datefield”
  • R Split data.frame using a column that represents and on/off switch
  • Approximate Order-Preserving Huffman Code
  • Can I programmatically choose the Android layout folder?
  • Not able to aggregate on nested fields in elasticsearch
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • Could not find rake using whenever rails
  • Paperclip, set path outside of rails root folder
  • Linq Objects Group By & Sum
  • Read text file and split every line in MSBuild
  • Optimizing database types to compact database (SQLite)
  • C# - Serializing and deserializing static member
  • Java applet as stand-alone Windows application?
  • Proper folder structure for lots of source files
  • Buffer size for converting unsigned long to string
  • Load html files in TinyMce
  • Error creating VM instance in Google Compute Engine
  • Acquiring multiple attributes from .xml file in c#
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • Append folder name and increment by 1 using batch script
  • reshape alternating columns in less time and using less memory
  • java string with new operator and a literal