In my previous blog post with video, we’ve seen designing a simple horizontal accordion using 3 large image buttons.
Though an accordion doesn’t need the use of images to work, I used them for ease of explaining the working of the accordion.
In this article we will use the original Michael Leideber horizontal accordion javascript to design a slide show that will have a welcome message, 4 images with captions, and a contact section in the end having a form to enable viewers send emails.
Here is the accordion below. The 4 images have the tickers 1, 2, 3, and 4, and so does the contact section in the end with the word ‘contact’ arranged vertically.
Hover your mouse on the tickers to see how the slide-show functions. In future I’ll attempt to show more useful examples of accordion slide-show.
The CSS and the HTML codes used for designing this horizontal accordion slideshow are given below. You can copy+paste them for your use (CSS code, HTML code). But before we go to them, here is the video that gives a glimpse of how to do the accordion slideshow.
The CSS
The main focus will be setting the width of the accordion. Since each section opens for 400px – that’s the width of the images – and the width of each of 5 ticker portion is 14px, the total width of the accordion is set at 470px.
‘Display Block’ and ‘Display Inline’ are the other 2 important features. The second makes all the accordion sections to fall ‘inline’ and be displayed side by side. ‘Display Block’ presents the whole unordered list of the accordion in a block before letting any other style determine its appearance.
Here is the CSS code.
* {margin:0; padding:0}
#sm ul {
list-style: none;
width: 470px;
height: 300px;
display: block;
overflow: hidden;
}
#sm ul li {
float: left;
display: inline;
overflow: hidden;
width:400px;
}
The HTML Code
Note the ‘body onload’ statement. It loads the javascript that governs the operation of the accordion slideshow. Each section opens for 400px as evident in the second element within the parenthesis.
The last figure is ’1′ which ensures that the first section opens when the webpage, and therefore the javascript, loads. If you change the figure to 2, 3…up to 5, the corresponding section will open on the loading of the page instead of the first section.
Here is the HTML code.
<html><head>
<title>How To Create Horizontal Accordion Slideshow</title>
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>
</head>
<body onload="slideMenu.build('sm',400,25,8,1)">
<div style="float:left; width:470px; height:300px;">
<!-- "Slidemenu" begins -->
<div id="sm">
<ul>
<!-- 1st section -->
<li>
<img border=0 src="slideshow-start.png" />
</li>
<!-- 2nd section -->
<li>
<img border=0 src="morephoto-A.jpg" />
</li>
<!-- 3rd section -->
<li>
<img border=0 src="morephoto-B.jpg" />
</li>
<!-- 4th section -->
<li>
<img border=0 src="morephoto-C.jpg" />
</li>
<!-- 5th section -->
<li>
<img border=0 src="morephoto-D.jpg" />
</li>
<!-- 6th section -->
<li style="width:400px; height:300px; background-image:url('contact.png')">
<form style="margin: 0;" method="post" action="http://oi.vresp.com?fid=acd1e256a6" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
<table cellpadding="0" cellspacing="3" style="margin: 180px 60px 20px;" width=100>
<tr>
<td align=left valign=middle><label style="font:normal 20px arial;color:#f00;">Email:</label><br /><input name="email_address" size="12" /></td>
<td align=left valign=middle><label style="font:normal 20px arial;color:#f00;">Name:</label><br /><input name="first_name" size="12" /></td>
<td align=left valign=bottom><input type="submit" value="I Want It!" style="margin: 0 auto; font: normal 12px verdana; height:22px;" /></td>
</tr>
</table>
</form>
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<!-- "slidemenu" ends -->
</body>
</html>
 This article of August 1st, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
