"...and slide, two three four"
Vanilla's layout features such as sliding sidebars and the navigation menu all rely on jQuery, as do many of the administrative functions. It's jQuery that allows you to save content without page refreshes and it's partly thanks to jQuery that Vanilla is so fast.
Every page that is created using Vanilla CMS includes the jQuery core file. This allows you to access hundreds of functions simply by giving your HTML elements a special ID or class attribute. For example, the word HTML in the previous sentence uses a jQuery tooltip class to show a hovering message when the mouse is placed over it.
This link opens and closes the paragraph below and was achieved by adding
id="para_to_hide" to the paragraph tag. The link has an onclick handler:
Bundled jQuery Plugins
We've included many popular jQuery plugins with Vanilla. Here's a few of them:
- blockUI - allows screen overlays and modal dialogues
- Nyromodal - a fully blown lightbox plugin (see below)
- Hi-Viz - our own high visibility accessibility plugin
- Keynav - allows navigation of the main menu by keystrokes alone
- FileTree - allows directory tree browsing
- Tooltip - allows fancy mouseover tooltips
- UI Core - allows dragging, dropping, sorting and resizing
- Autogrow - autosize textareas
- Corner - adds rounded corners to DOM elements (without the use of images)
- Innerfade - create slideshow transitions from elements and images
- ScrollTo - Allows fancy page scrolling to anchor elements
- Datepicker - a fancy, very flexible date picker
- FancyBox - another lightbox plugin
- Search Highlights - highlight anything, anywhere
Credit to all of these splendid tools and their authors.
The Ubiquitous Lightbox
Vanilla also has its own lightbox-style image features. To open an image, link or media file in a lightbox window, simply add 'lightbox' to the link element's class attribute. Click the image below to see it in action.
Feature Update - We've now added a feature to convert every image on a page to a lightbox image. You simply tick an option box and every image on the page is turned into a link which opens the image in a swish-looking window. If you have multiple images, they'll be displayed as a manual slideshow.
As a regular link:
With an additional title:
Check out the Media Gallery feature for even more jQuery multimedia shenanigans.
Once you start using jQuery, we can almost guarantee that your programming quality and the speed at which you develop will increase. It's an incredible framework and it's hugely popular.