jQuery Roundup: TOC, Curtain.js, Griffin.editor, imgg
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.
