- Download the Plug-in files from the source site. I'm using jQuery Cycle in this example.
- 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. - 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.
- jQuery has 3 basic parts to it:
- the core code library which you ref in your <head> tags,
- the plug-in scripts & CSS files (if any) which you ref in your <head> tags,
- the function code inside <script> tags to invoke the plug-in.
=======================
<!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.
