The following code samples and examples are provided to demonstrate how to implement some of the most commonly used features of MediaRich.The samples have been created by Equilibrium and our integration partners and are provided here for your convenience.

Installation Instructions
All examples are designed for a default install of MediaRich and IIS. Unzip the files to your C drive and the files will be placed where they need to go.

To access the examples after you have installed them enter http://localhost/examples/vars/index.html
If you have a custom install of MediaRich or your default website has been moved, you will need to manually place the required files in the correct locations.

To access the examples after you have installed them enter http://localhost/examples/vars/index.html


Layers Example

Instead of having to create every possible combination, one layered Photoshop file is used to generate all the derivative images. The user makes a selection on the browser and MediaRich collapses the original image based on those selections. This is an example using a motorcycle with custom parts.
[download_link link=”#”]Layers Example.zip (537KB)[/download_link]
Zoom Examples

These examples show how MediaRich can be used to zoom into a specific coordinate of the original image. There are no preliminary requirements for offering this functionality on any source image. To see list of formats supported, click here.

Accepts the coordinates and rounds them off to a specific number. The default cell size is 25; therefore, a 300 x 300 image is broken down into 144 squares. The following is an example of how the code handles the coordinates: 123,112 -> converted to -> 125, 100.

Dynamic HTML is used to capture the x and y coordinates of the user’s mouse. MediaRich (zoom.ms) takes the coordinates and passes it to a built-in zoom function. Essentially the zoom function performs a crop and scale on the original image. Because both operations are being handled with the one function, this is considerably faster than performing the operations separately.

Note: The pan/click events will not allow the user to receive an image beyond the outer bounds of the original image.

The right mouse click event is being captured to allow for standard mouse operations. This functionality has been tested on IE 5, 5.5, 6 and NS 4.7, 6 on a PC and may work differently in other configurations.
[download_link link=”#”]Zoom_Example.zip (2.3MB)[/download_link]

Colorize Example
The colorize example takes an original image and applies a hexadecimal RGB color value (0xFF1100) per the original image’s alpha channel. An image has to have an alpha channel in order to make a selection on the image. This isn’t a standard MediaRich requirement, but has been built into the demo. MediaRich can make selections per a mask (i.e. alpha channel) or a color value, similar to the Magic Wand operation in Photoshop.

Just like in Photoshop, selection per a color value can give unexpected results. Using mask ensures an accurate selection is made on the image.

Note: MediaRich can accept standard RGB and hexadecimal values (i.e. red = 255, green = 255, blue = 255 or 0xFFFFFF).

No Dynamic HTML is necessary for this demo.
[download_link link=”#”]Colorize_Example.zip (2.3MB)[/download_link]
Back to Developer Resources

Equilibrium Solutions Brochure

Equilibrium Solutions Brochure