jQuery Roundup: TOC, Curtain.js, Griffin.editor, imgg

28 Feb 2012 | By Alex Young | Tags jquery plugins ui effects editors
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

TOC

TOC (GitHub: jgallen23 / toc, License: MIT) by Greg Allen will generate a table of contents for a page, and automatically highlight the current section. Basic usage is simply $('#toc').toc();, but it supports some configuration options as well:

$('#toc').toc({
  'selectors': 'h1,h2,h3',   // elements to use as headings
  'container': 'body',       // element to find all selectors in
  'smoothScrolling': true,   // enable or disable smooth scrolling on click
  'prefix': 'toc',           // prefix for anchor tags and class names
  'highlightOnScroll': true, // add class to heading that is currently in focus
  'highlightOffset': 100     //offset to trigger the next headline
});

The design of the plugin allows multiple tables of contents to be used on a page, and the author is planning to add support for Zepto and Ender.

Curtain.js

Curtain.js (GitHub: Victa / curtain.js, License: MIT) by Victor Coulon and submitted by Hirvesh displays pages using an effect similar to a slide show. It supports keyboard shortcuts and conventional scrolling. The panels that make up the page will automatically resize to fill the window.

The plugin is invoked by $('.curtains').curtain() and expects an ordered list:

<ol class="curtains">
  <li class="cover">your content</li>
  <li>
    <div class="fixed"> <!-- if you need a "fixed" content -->
      Fixed content
    </div>
  </li>
</ol>

Panels can also be added dynamically using $('.curtains').data('plugin_curtain').insert().

Griffin.editor

Griffin.editor (GitHub: jgauffin / griffin.editor, License: MPL) by Jonas Gauffin is a jQuery-enhanced, zero configuration, textarea. It supports markdown, but the author notes other formats are easily supported, access keys, and syntax highlighting. It uses jQuery UI, and is easily set up with a call to $('.editor').griffinEditor() and suitable HTML.

The griffin.editor / Demos folder contains examples of how to use the plugin.

imgg

imgg (GitHub: bugzu / imgg, License: MIT) by Gaurav Sharma displays images using an animated mosaic effect. It’s used by passing an array of image locations to $().imgg:

$('#gallery').imgg({
  images: ['images/img11.png', 'images/img22.jpg', 'images/img33.jpg']
});

The author has provided sample images and CSS.


blog comments powered by Disqus