MovingBoxes

Sort demo

by Mottie

HTML

<link rel="stylesheet" href="https://css-tricks.github.io/MovingBoxes/css/movingboxes.css">
<script src="https://css-tricks.github.io/MovingBoxes/js/jquery.movingboxes.js"></script>
<ul id="slider">

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/1.jpg" alt="picture" />
    <h2>Olivia News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/2.jpg" alt="picture" />
    <h2>Alice News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/3.jpg" alt="picture" />
    <h2>Yin News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/4.jpg" alt="picture" />
    <h2>Gerri News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/5.jpg" alt="picture" />
    <h2>Tabitha News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/6.jpg" alt="picture" />
    <h2>Mary News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>

  <li>
    <img src="https://css-tricks.github.io/MovingBoxes/demo/7.jpg" alt="picture" />
    <h2>Kitty News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>

</ul>

CSS

#slider {
  width: 50%;
}

#slider li {
  width: 150px;
}

JavaScript

// This resize demo only works properly with MovingBoxes v2.2.3+
//
var timer;
$(window).resize(function() {
  clearTimeout(timer);
  var slider = $('#slider').data('movingBoxes');
  slider.options.width = $(window).width() * 0.5; // make 50% browser width
  slider.options.panelWidth = 0.7; // make 70% of wrapper width
  // prevent updating continuously, aka throttle resize
  timer = setTimeout(function() {
    slider.update(false);
  }, 100);
});

$('#slider').movingBoxes({

  // overall width of movingBoxes
  // width: 300, // Deprecated, but still works in v2.2.2
  // current panel width adjusted to 50% of overall width
  // panelWidth: 0.5, // Deprecated, but still works in v2.2.2    

  // **** Appearance ****
  // start with this panel
  startPanel: 1,
  // non-current panel size: 80% of panel size
  reducedSize: 0.8,
  // if true, slider height set to max panel height; if false, height will auto adjust.
  fixedHeight: false,

  // **** Behaviour ****
  // animation time in milliseconds
  speed: 500,
  // if true, hash tags are enabled
  hashTags: true,
  // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
  wrap: false,
  // if true, navigation links will be added
  buildNav: true,
  // function which returns the navigation text for each panel
  navFormatter: function(index, panel) {
    return "&#9679;"
  },
  // anything other than "linear" or "swing" requires the easing plugin
  easing: 'swing',

  // **** Selectors & classes ****
  // current panel class
  currentPanel: 'current',
  // added to the navigation, but the title attribute is blank unless the link text-indent is negative
  tooltipClass: 'tooltip',

  // **** Callbacks ****
  // e = event, slider = MovingBoxes Object, tar = current panel #
  // callback when MovingBoxes has completed initialization
  initialized: function(e, slider, tar) {},
  // callback upon change panel initialization
  initChange: function(e, slider, tar) {
    // alert( 'Changing panels to #'...