ParentChildFader jQuery Plugin

This is a simple image fader plugin much in the spirit of what you can find with the jQuery Cycle plugin — except this implementation allows authors to define parents with corresponding children.

Features

• Parent/Child slide show
• Navigation buttons are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Pause autoPlay on hover (optional)

Usage & Options (defaults)

Markup Usage

  <div class="parent-child-fader">
    <!-- Parent Images -->
    <div class="parent-set">
      <ul>
        <li><img src="images/parent-1.jpg" alt="" /></li><!-- Parent 1 (associated with Childset 1) -->
        <li><img src="images/parent-2.jpg" alt="" /></li><!-- Parent 2 (associated with Childset 2) -->
      </ul>
    </div>

    <!-- Childset Images -->
    <div class="child-sets">

      <!-- Childset 1 -->
      <ul>
        <li><img src="images/child-1.jpg" alt="" /></li>
        <li><img src="images/child-2.jpg" alt="" /></li>
        <li><img src="images/child-3.jpg" alt="" /></li>
      </ul>

      <!-- Childset 2 -->
      <ul>
        <li><img src="images/child-4.jpg" alt="" /></li>
        <li><img src="images/child-5.jpg" alt="" /></li>
        <li><img src="images/child-6.jpg" alt="" /></li>
      </ul>

    </div>
  </div>

jQuery Options

  $("div.parent-child-fader").parentChildFader({
    autoplay: true,               // Fader can be set to run on initial load
    startText:"start",            // start text
    stopText:"stop",              // stop text
    pauseOnHover: true,           // If true, the fader will pause on hover
    showStartStopControl: true,   // If true, the "stop"/"start" toggle button will be built
    showNavigation: true,         // If true, the navigation buttons will be built
    fadeInSpeed: 2500,            // Set the speed of fading in
    fadeOutSpeed: 2500,           // Set the speed of fading out
    interval: 4000                // Set the duration between fades
  });

Changelog

Version 0.1

• First version