As a designer building websites on the LightCMS system, you can utilize jQuery as well. This short guide is designed to give you a quick look at how to get started. For more detailed information on jQuery, you can check out the links to other resources at the end of this article.
Calling the library
When you're ready to play with jQuery, you'll want to link to the jQuery library of your choice in the HTML head for each page on which you want to utilize jQuery. You can do this by editing the HTML files for the design templates you are using on your pages. For example, adding the following line of code to your HTML head will link to a jQuery library hosted by Google:
Directly following this line of code, you'll need to link to any custom JS files you create that you want to use on the page. You'll need to set up these files using the .js extension and store them with your LightCMS template files. Add a script code like the one above for each file you need to call and set the src= attribute to the location of your custom .js files.
Time to experiment
Your page is now set up for you to start playing with jQuery, so let's take a look at what you might put inside your custom .js files we showed you how to link to earlier. What will you do first? Here are a couple of simple examples that you might find helpful. There are endless possibilities to what you can do with jQuery, and it will get easier as you become more familiar with it.
Fade in / out
This simple effect makes it so that when your page loads, the targeted image is shown at 50% opacity. When the viewer's mouse hovers over the image, it returns to full opacity. An effect similar to this can be seen on our integrated photo galleries. Once you've set this code up in your custom .js files, you can then target an image for fading by adding the ".faded_img" class to its markup. Of course, you could replace the ".faded_img" class used below with any class name you prefer.
Toggle (using slideToggle)
This creates an effect where you can hide content until an element is clicked. When the element you choose is clicked, the toggle goes into effect. A great example of this would be to create "hidden" content on a page, and navigational tabs could then be used to reveal the hidden content. The placeholder class name ".hidden_img" can be replaced with whatever class, element, or ID you wish to be hidden. The "p" placeholder can be replaced with whatever you want to be the trigger for revealing the hidden element.
// This hides the indicated area by default when page loads.
// Insert the element you want users to click on to hide or reveal the toggle area.
// Slow or fast can be used based on preference
noConflict: your friend if you need it
The LightCMS system already runs its jQuery code in noConflict mode and reserves $ef for all of its calls. Therefore, you shouldn't encounter conflicts with other jQuery invoked by the LightCMS system. However, there is one element of LightCMS that uses the Prototype JS library instead of jQuery. That element is the form builder. So, if your page has a form-builder form on it, your jQuery may conflict with the Prototype functionality used by LightCMS. We are working on converting the form builder from Prototype to jQuery, but until that is complete, noConflict can help resolve any issues that arise.
To invoke noConflict, simply add the noConflict call below to your custom .js files. It will wrap around all of the custom jQuery code you write. Your custom code should be inserted in the area indicated below, using $ just like normal.
// The code you want that's going to be using the jQuery libraries
Suggested resources for continued education
Related Resources from LightCMS
Thu, December 16, 2010
by Vince Conn filed under