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.

This example was not built to support smaller screen sizes such as mobile devices. However, the latest version of zAccordion can be configured to support these devices using media queries. Please see the example demonstrating responsive design.

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

  • 											<ul id="splash">
    												<li>
    													<img src="diner.jpg" alt="" />
    													<div>
    														<strong>Old School Diner</strong>
    														<p class="splash-text">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.</p>
    													</div>
    												</li>
    												<li>
    													<img src="pool.jpg" alt="" />
    													<div>
    														<strong>A Day at the Pool</strong>
    														<p class="splash-text">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.</p>
    													</div>
    												</li>
    												<li>
    													<img src="gas.jpg" alt="" />
    													<div>
    														<strong>Fill it Up!</strong>
    														<p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
    													</div>
    												</li>
    												<li>
    													<img src="car.jpg" alt="" />
    													<div>
    														<strong>Going for a Drive</strong>
    														<p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
    													</div>
    												</li>
    											</ul>
    										
  • The JavaScript is slightly more intense than the default example. Please download and view the examples for documentation related to the control buttons.

    												$(document).ready(function() {
    													$("#splash").zAccordion({
    														timeout: 4500,
    														speed: 500,
    														slideClass: 'slide',
    														animationStart: function () {
    															$('#splash').find('li.slide-previous div').fadeOut();
    														},
    														animationComplete: function () {
    															$('#splash').find('li.slide-open div').fadeIn();
    														},
    														buildComplete: function () {
    															$('#splash').find('li.slide-closed div').css('display', 'none');
    															$('#splash').find('li.slide-open div').fadeIn();
    														},
    														startingSlide: 1,
    														slideWidth: 600,
    														width: 900,
    														height: 310
    													});
    												});
    											
    												$(document).ready(function() {
    													$("#splash").zAccordion({
    														timeout: 4500,
    														speed: 500,
    														slideClass: 'slide',
    														animationStart: function () {
    															$('#splash').find('li.slide-previous div').fadeOut();
    														},
    														animationComplete: function () {
    															$('#splash').find('li.slide-open div').fadeIn();
    														},
    														buildComplete: function () {
    															$('#splash').find('li.slide-closed div').css('display', 'none');
    															$('#splash').find('li.slide-open div').fadeIn();
    														},
    														startingSlide: 1,
    														slideWidth: 460,
    														width: 700,
    														height: 235
    													});
    												});
    											
  • The CSS below styles the tooltip.

    											#splash div {-moz-border-radius:5px;-webkit-border-radius:5px;background-color:rgba(255,255,255,0.7);border-radius:5px;bottom:0;margin:20px;padding:15px;position:absolute;z-index:10;}
    											#splash h2 {font-size:14px;margin-bottom:5px;}
    											#splash strong {color:#000;font-size:11px;text-shadow:none;}
    											#splash p {color:#000;font-size:11px;line-height:14px;margin:0!important;text-shadow:none;}
    										

« Back to the Examples