zAccordion — An Advanced Example

The example below contains an info box, uses some transition effects, and demonstrates controls that will change the slideshow to a specific slide.

Back to the Examples

  • Example Slide Image 1
    Old School Diner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • Example Slide Image 2
    A Day at the Pool

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Example Slide Image 3
    Fill it Up!

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Example Slide Image 4
    Going for a Drive

    Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

Controls:

Implementation

The accordion above starts with slide number 2 shown (well, technically slide 1 because we are using a zero-based index in the JavaScript). It calls custom options on open, close, and click. In this example, the options help fade a tooltip in and out.

The JavaScript is slightly more intense.

							$(document).ready(function() {
								$("#splash").zAccordion({
									timeout: 4500,
									width: 884,
									speed: 700,
									slideClass: "slide",
									animationStart: function() {
										$("#splash").find("li.slide-previous div").fadeOut();
									},
									animationComplete: function() {
										$("#splash").find("li.slide-open div").fadeIn();
									},
									slideWidth: 600,
									height: 310,
									startingSlide: 1
								});
								$("#splash").find("li.slide-closed div").css("display", "none");
							});

Most of the CSS below styles the tooltip. There is a bit of CSS on the list-items to allow for a shadow to overflow onto the previous slide.

							#splash li {overflow:visible !important;}
							#splash div.splash-bg {background:#fff;border-radius:5px;bottom:20px;height:80px;left:25px;opacity:.75;position:absolute;width:550px;z-index:10;}
							#splash div.splash-info {bottom:30px;height:55px;left:40px;position:absolute;width:520px;z-index:15;}
							#splash h2 {font-size:14px;margin-bottom:5px;}
							#splash strong {font-size:11px;color:#000;text-shadow:none;}
							#splash p {font-size:11px;line-height:14px;text-shadow:none;color:#000;margin:0 !important;}

Back to the Examples