Branding Area by Matrix Group

♦ ♦ ♦

Quick Start: Three Simple Steps

1. Include the jQuery and plugin files

Download the plugin and replace any instances of /path/to/ in the snippet below with what is appropriate for your hosting environment.

<link rel="stylesheet" href="/path/to/jquery.matrix.branding.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/path/to/jquery.matrix.branding.js"></script>

2. Write/generate your markup

You must have one container element per slideshow. Within that element, there should be a DIV for every slide. The slide should contain an image for the background (assigned via the slide-background class) and a DIV for the optional slide content (assigned via the slide-content class).

<div id="branding">
  <div>
    <img src="image1.jpg" alt="" class="slide-background">
    <div class="slide-content">first slide</div>
  </div>
  <div>
    <img src="image2.jpg" alt="" class="slide-background">
    <div class="slide-content">second slide</div>
  </div>
  <div>
    <img src="image3.jpg" alt="" class="slide-background">
    <div class="slide-content">third slide</div>
  </div>
</div>

3. Initiate the branding area plugin

This snippet should go right before your closing </body> tag.

<script>
  $(function(){
    $("#branding").matrixBranding();
  });
</script>

♦ ♦ ♦

Demos

• Branding area with slide indicators
• Branding area with slide thumbnails

♦ ♦ ♦

Options

Expand All

The Branding Area plugin is built to look and function great without any additional configuration. If you'd like to customize a few things, the following options are available:

• nextButtonClass
  Type: String
  Default: 'next'

  The class name that will be applied to an auto-generated "next slide" button.

• previousButtonClass
  Type: String
  Default: 'prev'

  The class name that will be applied to an auto-generated "previous slide" button.

• nextButtonText
  Type: String
  Default: '→'

  The text that will be displayed in the auto-generated "next slide" button.

• previousButtonText
  Type: String
  Default: '←'

  The text that will be displayed in the auto-generated "previous slide" button.

• selectedSlideClass
  Type: String
  Default: 'current'

  The class name that will be applied to the currently visible slide (and slide indicator).

• transitionDuration
  Type: Number
  Default: 400

  The time (in milliseconds) in which the currently visible slide takes to crossfade into the next slide.

  $("#branding").matrixBranding({
    transitionDuration: 400
  });
  

• slideDuration
  Type: Number
  Default: 6000

  The time (in millseconds) a slide remains visible before the next slide fades in. This works in conjunction with the autoPlay option.

  $("#branding").matrixBranding({
    slideDuration: 6000
  });
  

• autoPlay
  Type: Boolean
  Default: true

  If set to true, an automatic slideshow will begin upon initialization of the plugin.

• pauseOnClick
  Type: Boolean
  Default: true

  If set to true, an automatic slideshow will be immediately paused when a user clicks the slide navigation buttons or slide indicators.

• showSlideIndicators
  Type: Boolean
  Default: false

  If set to true, a simple numeric list of slide indicators will be added above the slides.

• showSlideThumbnails
  Type: Boolean
  Default: false

  If set to true, slide thumbnails will be generated and appended to a thumbnails container (generated automatically). By default, the thumbnail will be a scaled-down version of the slide-background image unless an image with a class of slide-thumbnail is also included within the slide.

  For example:

  <div id="branding">
      <div>
          <!-- this slide will use the .slide-background image as the thumbnail -->
          <img src="http://placekitten.com/1000/800" alt="" class="slide-background">
          <div class="slide-content">first slide</div>
      </div>
      <div>
          <!-- this slide will use the .slide-thumbnail image as the thumbnail -->
          <img src="http://placekitten.com/900/700" alt="" class="slide-background">
          <img src="http://placekitten.com/50/50" alt="" class="slide-thumbnail">
          <div class="slide-content">second slide</div>
      </div>
  </div>
  

• assignThumbnailsContainer
  Type: jQuery Object
  Default: null

  If a jQuery Object is provided for this option, all thumbnails will be appended to the object rather than being automatically generated.

  $("#branding").matrixBranding({
    assignThumbnailsContainer: $("#my-thumbnail-container")
  });
  

• initialSlide
  Type: Number
  Default: 1

  A number that specifies which slide should be visible upon initialization of the plugin. The first slide can be identified by the number 1, second slide by 2, etc.

• startWithRandomSlide
  Type: Boolean
  Default: false

  If set to true, a slide will be chosen at random to display first when the plugin is initialized.

• assignNextNavigation
  Type: jQuery Object
  Default: null

  If a jQuery Object is provided for this option, it will bind the "show next slide" event to it. This is to be used in place of having a "next slide" button automatically generated.

  $("#branding").matrixBranding({
    assignNextNavigation: $("#my-next-button")
  });
  

• assignPreviousNavigation
  Type: jQuery Object
  Default: null

  If a jQuery Object is provided for this option, it will bind the "show previous slide" event to it. This is to be used in place of having a "previous slide" button automatically generated.

  $("#branding").matrixBranding({
    assignPreviousNavigation: $("#my-next-button")
  });
  

GitHub

This project is hosted and maintained on GitHub for you to use and abuse.