Implementing Simple jQuery Plugins

Implementing Simple jQuery Plugins

Sure, writing your own jQuery is fun, but can also be a little daunting if you have no idea what you are doing. So today, I am going to teach you how to take someone else’s hard work and make use of it.

  1. First, you need to find your plugin for this example we’ll use the tubular plugin.This plugin allows you to play a looped youtube video as the background for your site and can be found here. This is super easy to implement, another one is jQuery loader 2, which can be found here.
  2. Once you have downloaded the appropriate files you will need to place them in your –>js folder.
  3. Now, open your header and enter the following before the </head>
     <script type="text/javascript" charset="utf-8" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.tubular.js"></script><script type="text/javascript" charset="utf-8" src="<?php bloginfo('stylesheet_directory'); ?>/js/tubular/jtube.js"></script>

    (This simply tells the site to load in these jQuery files.)

  4. Now all we have to do is tell the plugin what video we want it to play in the background.
  5. In this case I am using this video: http://www.youtube.com/watch?v=_VKW_M_uVjw, the only information we really need it the video idea which is shown after “/watch?v=”So here, we are use the ID, “_VKW_M_uVjw”
     
  6. Open jtube.js, which is in –>js–>tubular, and place it inside of the tubular function like so:
    $('body').tubular('_VKW_M_uVjw','body');
  7. And that’s it, we’re done!

Where have you been able to insert jQuery into plugins? Do you have any questions about this process? Let us know in the comments.

Enjoying our insights? Enter your email below to subscribe to our monthly newsletter.
Previous
Next