Monday, December 3, 2012 Adding a jQuery plugin to a single page in MODX
If you are using a jQuery plugin on a single page of your site, to optimise site performance, it's good practise to include the associated JavaScript and CSS files on only that page. In MODX you can use a Snippet to do this. In the following example I am installing the BXSlider plugin.
Firstly download and unzip the plugin files to a location within your MODX assets directory.
Next, in the MODX Manager under the Elements tab on the left navigation, right click Snippets and select New Snippet. Enter "bxslider" as the snippet name and enter the following code as the Snippet Code. You'll need to update the file paths accordingly to point to your files.
In MODX the method regClientCSS will add a link to the CSS file to the <head> of your document. Similarly, regClientHTMLBlock will add an HTML block to your document before the closing </body> tag.
Save the snippet.
You can now install the snippet by editing the desired page and dropping "[[!bxslider]]" into the Content field along with your correctly marked up list (see code comments above) to which the slider will be applied.
That's it!
Tags
Comments
Monday, December 3, 2012 Mark Hamstra
Then you can also define per-resource specific header/footer things.
You could also (and I use that on my site for gallery javascript/css in my blog articles) use a checkbox template variable.. if it's checked, add the css/js, otherwise don't :)
Tuesday, December 4, 2012 Mark Cyrulik
$modx->regClientStartupScript?
Tuesday, December 4, 2012 Simon Bingham
To improve site performance it's better to link to external JavaScript files at the bottom of your document so the JavaScript is loaded after the rest of the content.
