ImageGear .NET
Using ImageGear jQuery Plugins
User Guide > How to Work with... > ASP.NET > Displaying Images using ASP.NET > 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

PageView

ImGearPageViewPlugin

ThumbnailView

ImGearThumbnailViewPlugin

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

  1. 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>
  1. Create two folders under your application:
    1. Scripts
    2. Images
  2. 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:
  1. 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/ImGearPlugins22.1.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearCore22.1.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearClientViewer22.1.js"> </script>
     <script type="text/javascript" src="Scripts/ImGearClientArt22.1.js"> </script>
  1. 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:
  1. 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>
  1. Add the ImageGearService.svc file to your application folder.
  2. 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.
  3. 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.
  4. Make sure the viewImage folder has the image that you are trying to open in the PageView.
  5. Run your application to display the page just created. The page should display images in the PageView.

 

 

©2016. Accusoft Corporation. All Rights Reserved.

Send Feedback