Quovolver

Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.

Example One

This is the most basic usage of Quovolver with the default settings being used. See the full documentation for details on all available parameters.

“That which can be asserted without evidence, can be dismissed without evidence.”

— Christopher Hitchens (Quote 1)

“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”

— Christopher Hitchens (Quote 2)

“Everybody does have a book in them, but in most cases that's where it should stay.”

— Christopher Hitchens (Quote 3)

“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”

— Christopher Hitchens (Quote 4)

“Human decency is not derived from religion. It precedes it.”

— Christopher Hitchens (Quote 5)

“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”

— Christopher Hitchens (Quote 6)

// When document is ready...
$(document).ready(function() {
  // Call Quovolver on the '.quotes' object
  $('#demo-one .quotes').quovolver();
});
<div class="quotes">
  <blockquote>
  <p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
  <p>— Christopher Hitchens (Quote 1)</p>
  </blockquote>

  <blockquote>
  <p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
  <p>— Christopher Hitchens (Quote 2)</p>
  </blockquote>

  <blockquote>
  <p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
  <p>— Christopher Hitchens (Quote 3)</p>
  </blockquote>

  <blockquote>
  <p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
  <p>— Christopher Hitchens (Quote 4)</p>
  </blockquote>

  <blockquote>
  <p>“Human decency is not derived from religion. It precedes it.”</p>
  <p>— Christopher Hitchens (Quote 5)</p>
  </blockquote>

  <blockquote>
  <p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
  <p>— Christopher Hitchens (Quote 6)</p>
  </blockquote>
</div><!-- .quotes -->
No specific styles are required for this plugin to work :)

Example Two

In this example, we are taking advantage of some of the available options. We've turned off the auto rotating feature and enabled all of the navigation features. We also changed the speed of the animation and which elements are being targeted since we aren't wanting to rotate the direct children of the selected object (view the HTML tab for more details).

  • “That which can be asserted without evidence, can be dismissed without evidence.”

    — Christopher Hitchens (Quote 1)

  • “Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”

    — Christopher Hitchens (Quote 2)

  • “Everybody does have a book in them, but in most cases that's where it should stay.”

    — Christopher Hitchens (Quote 3)

  • “Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”

    — Christopher Hitchens (Quote 4)

  • “Human decency is not derived from religion. It precedes it.”

    — Christopher Hitchens (Quote 5)

  • “Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”

    — Christopher Hitchens (Quote 6)

// When document is ready...
$(document).ready(function() {
  // Call Quovolver on the '.quotes' object
  $('#demo-two .quotes').quovolver({
  children : 'li',
  transitionSpeed : 600,
  autoPlay : false,
  equalHeight : false,
  navPosition : 'above',
  navPrev     : true,
  navNext     : true,
  navNum      : true,
  navText     : true,
  navTextContent : 'Quote @a of @b'
  });
});

This is an example of when we are targeting an item who's elements we want to rotate are not it's direct children. In this case, they are list items in an unordered list. So we use the "child" property and give it a value of "li" (just like if we were targeting them with CSS).

<div class="quotes">
  <ul>
  <li>
    <blockquote>
    <p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
    <p>— Christopher Hitchens (Quote 1)</p>
    </blockquote>
  </li>

  <li>
    <blockquote>
    <p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
    <p>— Christopher Hitchens (Quote 2)</p>
    </blockquote>
  </li>

  <li>
    <blockquote>
    <p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
    <p>— Christopher Hitchens (Quote 3)</p>
    </blockquote>
  </li>

  <li>
    <blockquote>
    <p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
    <p>— Christopher Hitchens (Quote 4)</p>
    </blockquote>
  </li>

  <li>
    <blockquote>
    <p>“Human decency is not derived from religion. It precedes it.”</p>
    <p>— Christopher Hitchens (Quote 5)</p>
    </blockquote>
  </li>

  <li>
    <blockquote>
    <p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
    <p>— Christopher Hitchens (Quote 6)</p>
    </blockquote>
  </li>
  </ul>
</div><!-- .quotes -->

These styles are not required for the plugin to work. They are only to demonstrate how you could style the navigation that is generated by Quovolver.

/**
 * General Navigation Styles
 */
.quovolve-nav:before, .quovolve-nav:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 
.quovolve-nav:after { clear: both; }
.quovolve-nav {
  margin: 10px 0;
  line-height: 30px;
  zoom: 1;
}
.quovolve-nav-above {
  margin-bottom: 20px;
}
.quovolve-nav-below {
  margin-top: 20px;
}

.quovolve-nav span {
  float: left;
  margin-right: 5px;
}
.quovolve-nav a {
  background: #aaa;
  line-height: 20px;
  color: #fff;
  display: block;
  padding: 5px 15px;
  border: 0 none;
  text-align: center;
  /* Border Radius */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  /* Box Shadow */
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
}
.quovolve-nav a:hover {
  background: #dd390d;
}


/**
 * Numbered Navigation
 */
.nav-numbers {
  list-style: none; margin: 0;
  float: right;
}
.nav-numbers li {
  float: left;
  margin: 0 0 0 5px;
}
.nav-numbers li a {
  padding-left: 0; padding-right: 0;
  width: 30px;
}
.nav-numbers li.active a, .nav-numbers li a:hover {
  background: #dd390d;
}

/**
 * Navigation Description
 */
.nav-text {
  margin-left: 30px;
  color: #aaa;
}

Available Options

You can pass options as key/value object to the quovolver() function or modify them at the bottom of jquery.quovolver.js file.

Key Default value Description
children null If selector is provided, we will use the find method to get the group of items, otherwise we'll grab the children of the selected element.
transition 'fade' The style of the transition. Currently there are only two available options, fade and basic. More transitions will be added in the future or you can create your own by passing in your own function name. A JSON object will be passed to your function to work with.
transitionSpeed 300 This is the speed that each animation will take, not the entire transition. There may be multiple animations in any given transition but each animation will run at this set speed.
autoPlay true Toggle auto rotate.
autoPlaySpeed 6000 Duration before each transition. Time is in mili-seconds so 6000 ends up being 6 seconds.
pauseOnHover true Whether the auto play feature should pause when the object is hovered over. Auto rotate would resume when hovered off.
stopOnHover false Whether the auto play feature should stop when the object is hovered over.
equalHeight true Whether every item should have equal heights.
navPosition 'above' Where the enabled navigation elements will be output. Can be set to 'above', 'below', 'both' or 'custom' (must provide custom selector for placement).
navPositionCustom null The selector of the custom element where the enabled navigation elements will be output.
navPrev false Toggle the "previous" button.
navNext false Toggle the "next" button.
navNum false Toggle numbered navigation. This outputs a "1, 2, 3, 4..." that links to their corresponding element.
navText false Toggle navigation description (e.g. display current item # and total item #).
navPrevText 'Prev' Text for the "previous" button.
navNextText 'Next' Text for the "next" button.
navTextContent '@a / @b' The text that will display for the navigation description. '@a' will be replaced with current item number and '@b' with total number.

Public Methods

Quovolver's functions that you can play with. More coming soon.

Method Description
$('elementWeCalledQuovolverOn').trigger('goto', itemNumber); A public interface to move to transition to a specific item.