How to Include a jQuery Plug-in

In order to use a plug-in on your own site the first thing you need to do is include the plug-in itself along with whatever files it requires. Only after they are loaded can you actually run the plug-in.

Every jQuery plug-in obviously requires jQuery itself, some plug-ins might require other plug-ins or files but the technique for including them is exactly the same, just remember to change the paths to the scripts.

JavaScript-files should, contrary to stylesheets, be included in the body-element. More specifically at the very bottom, right before the closing body-tag.

After including the needed files the last bit on your page should look something like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/path/to/jquery.plug-in.js"></script>

    </body>

</html>

Now that the files are included on you page you can start using the plug-in. How the plug-in is implemented naturally differs from plug-in to plug-in, but in either case you're going to want to run the initializing code after the inclusion of the needed files.

You may have heard of running JavaScript "onload", more commonly <body onload="do_stuff()">, however, when including all your JS at the bottom of the page the document will already be loaded so there's no need to apply an onload event to anything.

Simply add another script-element, without a src-attribute, after the two script-elements already there, and run your code from it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/path/to/jquery.plug-in.js"></script>
        <script type="text/javascript">
            $('#my-element').plugIn();
        </script>

    </body>

</html>

If there's a lot of code being used on several pages it makes sense to move it to its own JS-file and included that rather than having it inline like that.

If you're not familiar with jQuery you may want to check out How jQuery Works from jQuery.com as well.

Hope that wasn't too confusing!

Random jQuery Plug-ins

  • Captcha Refresh

    If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...

    Details

  • Pixastic Editor

    This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects ...

    Details

  • Tag Sizes

    Use this plug-in on a list of tags (li:s) and it will use whatever numbers found in the list to give each tag a corresponding size.

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...