Home Ajax Jquery Introduction to jQuery plugin
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Introduction to jQuery plugin

Advertisement
This page discusses - Introduction to jQuery plugin

Introduction to jQuery plugin

     

Introduction to jQuery plugin

JQuery plugins are ready made web applications which are reside in a .js file . You have to include this file in your web page to use this plugin. Plus you need to define it's functionality via it's attributes (if needed).

You can include plugin file in your application as :

<script type="text/javascript" src="PLUGIN-NAME.js"></script>

If needed , you need to set attribute according to the plugin definition .

For jQuery official site for plugin click here

Example : Zoom Image section using jQuery plug-in

he plug-in ,we are using here, is "zoom.js". For zooming an image you must have image in small size as well as in big size both must be reside in same folder. After that you have to set the image selection area by setting "xzoom" & "yzoom" attribute . These attributes create a moving box which is used for selecting particular section of the image. When you hover this box on image's any area , it will zoom that area.

zoomImage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Magnifier</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="zoom/zoom.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(".image").jqueryzoom({
xzoom: 100,
yzoom: 100

});
});
</script>
<link rel="stylesheet" href="zoom/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="zoom/zoom.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" >
<br><br><br>
<p>Image Magnifier</p>
<div style="float:left;width:100%;clear:both;">
<div class="image">
<img src="zoom/jquery_small.jpeg" alt="light" jqimg="zoom/jquery_big.jpeg">
</div>
</div>
</div>
</body>
</html>

OUTPUT :

When we hover mouse on any section of image :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: Introduction to jQuery plugin  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com