Rondell - Display images and other content in a nice way

Prequisites

• jQuery Important
  1.5.2 or better
  Provided with the download.
• Modernizr Optional but recommended
  This library tests the browser for feature support and provides this information to the plugin and stylesheets.
  We use this for css fallbacks in our themes and touch detection.
  Provided with the download.
• jQuery mousewheel plugin Optional
  If you want to use the mouse horizontal scroll events to control the rondell.
  Provided with the download.

The plugins are provided in the libs folder.

If you don't want to use the Modernizr library you should remove the .cssgradients, .borderradius, .rgba and .boxshadow classes in css/jquery.smallipop.css to have css3 effects.

Required files

• Copy dist/jquery.rondell.js to your javascript folder.
• Copy dist/jquery.rondell.css to your css folder.
• Copy libs/jquery-x.x.x.min.js to your javascript folder if you don't use jQuery already.
• Copy libs/modernizr-x.x.x.js to your javascript folder if you don't use modernizr already.

There are minified versions of the rondell files for production in the lib and css folders too.

Modify your html header

Add these lines to the header (or footer in case of the javascripts) of your html file and replace x.x.x with the correct versions and use the correct path where you put your files.

<link rel="stylesheet" href="jquery.rondell.css" type="text/css" media="all" title="Screen"/>
<script type="text/javascript" src="jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="modernizr-x.x.x.min.js"></script>
<script type="text/javascript" src="jquery.rondell.js"></script></pre>

Get started!

Setup your images html and use the code of one of my examples to create your own rondell.

Experiment with the various options and send me a message if you want to share your great work.