Catepilla

Make that image gallery get all wiggly

Demo: nclud.github.com/catepilla

Custom built developed for nclud.com v3. Probably not that useful for anyone else.

Clone from GitHub

Don't forget to update/init submodules to get the requestAnimationFrame polyfill

git clone https://github.com/nclud/catepilla.git
cd catepilla
git submodule update --init

Markup

Catepilla should be used on a list of images.

<ul id="gallery">
  <li><img src="img1.jpg" /></li>
  <li><img src="img2.jpg" /></li>
  <li><img src="img3.jpg" /></li>
  ...
</ul>

Initialize

var gallery = document.getElementById('gallery')
var cat = new Catepilla( gallery, {
  // options...
  // defaults are shown, feel free to overwrite these
  segmentCount: 5,
  height: 300,
  segmentHeight: 0.55,
  transitionDuration: 0.2,
  perSegmentDelay: 0.05,
  wiggleAcceleration: 0.001,
  maxWiggleSpeed: 0.1,
  wiggleDelay: 1000,
  isAutoAdvancing: true,
  startAngle: Math.PI
})

Modernizr

Modernizr v2.5+ is required with the following options:

• CSS 2D Transforms
• CSS 3D Transforms
• Modernizr.prefixed()

Required CSS

.catepilla {
  position: relative;
}
  
.catepilla .segment {
  position: absolute;
  overflow: hidden;
}
  
.catepilla .segment img {
  position: absolute;
}

Methods

// reveal segments
cat.show();

// hide segments
cat.hide();

// stop wigglin' and stop cycle
cat.stopAnimation()

// start wigglin' and re-start cycle
cat.startAnimation()

// select next image
cat.next()

// selects image
cat.setSelectedIndex( 2 )

// adds image to gallery images, accpets URL string 
cat.addImage('http://example.com/my-pic.jpg')