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

  • Ajax Loader

    Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' o...

    Details

  • 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

  • Code Block Toolbar

    If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example...

    Details

More Plug-ins

Recent Comments

  1. Matt on "Accessible, Stylish Modal Windows With Modern CSS"

    I have tried to implement this, but for some reaso...

  2. mark on "Thunder Storm on Koh Mak"

    I have been on ko mak as well, and experienced a t...

  3. AL on "Project52"

    Hehe ok :) I might do that. Later.

Page cached. Loaded in: 0.0325 second(s).
Last DB change: 2010-09-08 19:34:43
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-08 20:49:40