"...and slide, two three four"
jQuery is a JavaScript framework that helps speed up development by providing content creators with a wealth of HTML manipulation and AJAX methods. It can greatly enhance simple web pages with dynamic effects and content using simple, minimal code.
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: onclick="$('#para_to_hide').toggle(200);"
To extend the functionality of the core jQuery library you can include your own functions and libraries at runtime. We've conveniently placed a button on the editing toolbar that allows you to scan your JavaScript folder and select which ones you wish to import.
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
- Querystring - pick up querystrings with JavaScript
- 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.



