Version

Adding Images to the WebImageViewer on the Client Side

Before You Begin:

The main objective of the WebImageViewer™ is to display images in a viewer. This topic will show you how to add an image to the WebImageViewer on the client side. The following example uses the add method on the ImageItemCollection. The add method takes an ImageItem as the parameter. In order to get an ImageItem, you have to use the createItem method.

What You Will Accomplish:

This topic will show you how to add an image to the WebImageViewer.

When you save and run your website after completing the following steps, your WebImageViewer should look similar to the WebImageViewer below.

WebImageViewer_Add_an_Image_to_the_WebImageViewer_01

Follow These Steps:

  1. From the toolbox, drag the WebImageViewer control on to your page.

  2. From the Properties window, set the following properties:

    • Height — 200px

    • Orientation — Horizontal

    • Width — 500px

  1. From the Source view of your Default.aspx, add the following code

In Javascript:

var iv = $find("WebImageViewer1");
var items = iv.get_items();
var item = items.createItem();
item.set_imageUrl("~/images/houseplant.jpg");
item.set_altText("addedItem");
item.set_tooltip("addedItem tooltip");
items.add(item);

  1. Save and run your website.