Configure Your System to Run the Sample

Upon successful installation on a machine pre-configured for IIS, the sample project should be located at

ImageGear.NET v24/Samples/Source Code/ASP.NET/CSharp/HTML5Viewer/

Launch the HTML5 Viewer Sample

There are multiple ways to launch the viewer. Use the method that suits you best.

Launch via IIS

You can launch the HTML5 Viewer directly from IIS with the following steps:

1. Open Internet Information Services (IIS) Manager.
2. Under Connections, expand the following tree nodes:
   • YOUR-PC-NAME → Sites → Default Web Site
3. Right-click the site, ImageGear24.NET_HTML5Viewer, and select Manage Application → Browse.
4. Your default web browser will open the HTML5 Viewer page.

Launch via ImageGear .NET Samples

Within the ImageGear .NET installation directory, there are two shortcuts which open the HTML5 Viewer page in your default web browser:

• ImageGear.NET v24/Samples/Executables/Web Samples/HTML5 Viewer Sample.lnk
• ImageGear.NET v24/Samples/Source Code/ASP.NET/CSharp/HTML5Viewer/HTML5ViewerSample.url

Launch via Visual Studio

You can launch the HTML5 Viewer from Visual Studio 2010 or Visual Studio 2015 solutions installed in the Samples directory:

ImageGear.NET v24/Samples/Source Code/CSharp/HTML5Viewer

These are the steps when using Visual Studio 2015.

1. Open HTML5Viewer.VS2015.x86.sln.
2. Press F5 or click > Google Chrome* in the toolbar. (* The web browser listed may vary based on system and Visual Studio configuration.)

Navigate the HTML5 Viewer

Open the HTML5 Viewer in your web browser. The sample viewer is divided into the Document Selection, Document Navigation, and Document Viewer sections:

Document Selection

At the top of the page is a thumbnail list of the documents. Click a thumbnail to display the document in the viewer and navigate through it.

By default, these documents exist locally in the host website at "~/Documents". You can change this location in the Web.config file or by using the Web.Config Editor.

The thumbnail images are present locally within the Images subfolder:

ImageGear.NET v24/Samples/Source Code/CSharp/HTML5Viewer/Documents

The thumbnail images are created in the thumbnail list in the ‘sample.js’ file found in:

ImageGear.NET v24/Samples/Source Code/CSharp/HTML5Viewer/Assets/HTML5Viewer/js

In addition to the default sample files provided in the Documents folder, you can upload custom files.

1. Click the circled up-arrow at the far-left side of the document thumbnails list.
2. A dialog displays and allows you to upload a custom file into the viewer sample.

Document Navigation

Below the thumbnail list is a toolbar of buttons to navigate and orient the loaded document.

 

The above buttons control the current zoom level of the document. The larger the value, the closer the zoom, and thus the larger the document is displayed.

 

In a multi-page document, the above buttons may be used to navigate to the first/last page, previous/next page, or to a specific page number.

 

 

The above buttons apply a rotation to the entire document.

 

The above buttons apply a rotation to the currently viewed page.

Document Viewer

Below the navigation toolbar is the document viewer displaying the loaded document.

If the document consists of only a single page, then it will be displayed in its entirety. However, if the document consists of multiple pages you may scroll to view the other pages.

The viewer is responsive and automatically adjusts the page according to screen size changes and is mobile-friendly.