Using ImageGear jQuery Plugins

JQuery plugins are provided for the following ImageGear ASP.NET web client controls:

These plugins are designed for use with the jQuery JavaScript library/framework. It is recommended that you use jQuery library versions that have support for the plugins. The ImageGear ASP.NET plugins will work in the absence of the Microsoft Ajax client library.

The table below shows the names of the plugins:

	Control Name	jQuery Plugin name
1.	PageView	ImGearPageViewPlugin
2.	ThumbnailView	ImGearThumbnailViewPlugin
3.	ImGearThumbnailList	ImGearThumbnailListPlugin

The plugins do not send Postbacks. The mark-up is not required to be enclosed in an HTML form tag. This makes them ideal for use in MVC web applications. The HTML elements to attach these plugins to must be DIV elements with given, unique ID's. A typical usage pattern is shown below:

Example	Copy Code
$(document).ready(function() { . $('#PageView1').ImGearPageViewPlugin(options).openPage(openPageParams); });

Step-by-step instructions for using ImageGear Plugins

Set up a simple HTML page containing the following markup:

HTML Example	Copy Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div style="float:right"> <div id="pluginPageView" style="height:800px; width:800px"> </div> </div> </body> </html>

HTML Example

Copy Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="float:right">
<div id="pluginPageView" style="height:800px; width:800px">
</div>
</div>
</body>
</html>

Create two folders under your application:
1. Scripts
2. Images
Copy the following JavaScript files from the <Install>/samples/ASP.NET/WebResources/JS folder to the Scripts folder that you just created in Step 2 above:

ImGearPlugins20.0.js
ImGearCore20.0.js
ImGearClientViewer20.0.js
ImgearClientArt20.0.js

Add the following in the Head section of the page to include the JavaScript files:

The jQuery file should be included bfore the plugins or any other script files. Also note the order in which to include the files.

Example	Copy Code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script type="text/javascript" src="Scripts/ImGearPlugins20.0.js"> </script> <script type="text/javascript" src="Scripts/ImGearCore20.0.js"> </script> <script type="text/javascript" src="Scripts/ImGearClientViewer20.0.js"> </script> <script type="text/javascript" src="Scripts/ImGearClientArt20.0.js"> </script>

Example

Copy Code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearPlugins20.0.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearCore20.0.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearClientViewer20.0.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearClientArt20.0.js"> </script>

Copy the following .png image files from the <Install>/samples/ASP.NET/WebResources/Images folder to the Images folder that you just created in Step 2 above:

ArtMarkHandles.png
ArtMarkHandles40.png
MenuIcons.png

Add the following JavaScript code to the Head section of the HTML page:

JavaScript Example	Copy Code
<script type="text/javascript"> //Note: The URL for service path (in blue) if necessary, should be changed to reflect your Domain in the service path. $(document).ready(function() { $("#pluginPageView").ImGearPageViewPlugin({ imageHandlerUrl: "ImageGearService.svc" , resourcePath : “Images”, artServiceOption: ImageGear.Web.UI.ImGearArtDataServices.ArtDataService }).openPage({ documentIdentifier: "ccitt.tif", pageNumber: 3}); }); </script>

JavaScript Example

Copy Code

<script type="text/javascript">
 //Note: The URL for service path (in blue) if necessary, should be changed to reflect your Domain in the service path.
$(document).ready(function() {
$("#pluginPageView").ImGearPageViewPlugin({ imageHandlerUrl: "ImageGearService.svc" , resourcePath
: “Images”, artServiceOption: ImageGear.Web.UI.ImGearArtDataServices.ArtDataService
}).openPage({ documentIdentifier: "ccitt.tif", pageNumber: 3});
});
</script>

Add the ImageGearService.svc file to your application folder.
Run the ASP.NET Web.Config Editor Application and point to the web.config of your application. If you do not configure your web.config file correctly, your application will fail.
If you are running this application in IIS, make sure that the IIS user has the necessary write access to your application folder for logging.
Make sure the viewImage folder has the image that you are trying to open in the PageView.
Run your application to display the page just created. The page should display images in the PageView.