alt-web logo

Tips & Tutorials for Web Designers

Thursday, November 8, 2012

Primer for Using jQuery Plug-Ins

From slideshows and sliders, to forms & mobile apps,   jQuery plug-ins are an easy way to add advanced web features (widgets) to your site without a lot of heavy manual coding.  Knowing how to use jQuery plug-ins will open up a whole new world of possibilities to you.
  1. Download the Plug-in files from the source site. I'm using jQuery Cycle in this example.
  2. For .zip file downloads, extract all contents with WinZip or StuffIt and save to your local site folder.  Click on screenshot.


    For plain text files, simply copy & paste the Plug-in code into a new blank JavaScript page and SaveAs: plug-in-name-ver.js to your local site folder.
  3. For site management reasons, I prefer to keep scripts in my Scripts folder, CSS files in my Styles folder and images in my Images folder but that's up to you. 
  4. jQuery has 3 basic parts to it:    
    1. the core code library which you ref in your <head> tags,
    2. the plug-in scripts & CSS files (if any) which you ref in your <head> tags,
    3. the function code inside <script> tags to invoke the plug-in. 
DOCUMENT EXAMPLE:
=======================

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Plug-In Page</title>


<!-- jQuery latest core library from CDN-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<!-- links to plug-in files within your local site-->

<script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/plug-in-name.css" media="screen" />

</head>

<body>
<div class="slideshow">
     <img src="Images/slide1.jpg" width="200" height="100" alt="description" />
     <img src="Images/slide2.jpg" width="200" height="100" alt="description" />
     <img src="Images/slide3.jpg" width="200" height="100" alt="description" />
     <img src="Images/slide4.jpg" width="200" height="100" alt="description" />
</div>

<!--Plug-In Function Code-->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
     fx: 'fade'
   });
});
</script>

</body>
</html>

=======================
HINTS:  
  • Ensure paths to your plug-in files are correctly pointing to file & folder names within YOUR site folder.
  • Linux servers are cAsE sEnSiTiVe. For best results use all UPPER or all lower case file names.
  • Don't use spaces in file or folder names. Dots, dashes or underscores are fine but not spaces.
  • Lastly, refer to your particular Plug-in's official documentation for the correct function code, fx,  and classes to use.
That's all there is to it.  I hope you enjoyed this brief introduction to using jQuery Plug-Ins.