zAccordion — An Inverted Accordion

This example flips the bottom slide. The bottom slide will be the last image.

Back to the Examples

Example Slide Image 1 Example Slide Image 2 Example Slide Image 3 Example Slide Image 4

Implementation

Four images are nested inside a div element.

							<div id="pictures">
								<img src="alley.jpg" width="400" height="260" alt="" />
								<img src="flag.jpg" width="400" height="260" alt="" />
								<img src="truck.jpg" width="400" height="260" alt="" />
								<img src="camera.jpg" width="400" height="260" alt="" />
							</div>
						

The invert option is set to true.

							$(document).ready(function() {
								$("#pictures").zAccordion({ 
									width: 570,
									height: 260,
									tabWidth: 75,
									invert: true
								});
							});
						

Back to the Examples