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

  • Slide Presentation

    A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will f...

    Details

  • Content Scroller

    Use this plug-in to make a list of elements only show one at a time and every now and then scroll to the next one. The plug-in scrolls in infinty, sta...

    Details

  • Togglable DL

    Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semant...

    Details

More Plug-ins

Recent Comments

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

    @Matt - What exactly isn't working? "Not working" ...

  2. roboteich on "Accessible, Stylish Modal Windows With Modern CSS"

    This is hardly accessible. Screen reader focus is...

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

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

Page cached. Loaded in: 0.0067 second(s).
Last DB change: 2010-09-03 17:14:49
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-03 19:45:35