O'Reilly logo

PrimeFaces Cookbook by Mert Çalışkan, Oleg Varaksin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Comparing images

The imageCompare component supports comparing two images by providing the user with a slider to drag over the images.

How to do it...

A basic definition for comparing two images of the maps of a sample city would be as follows:

<p:imageCompareleftImage="/resources/images/compare/istanbulMap.png"
  rightImage="/resources/images/compare/istanbulSatellite.png"
  width="700"
  height="400" /> 

How it works...

The leftImage attribute defines the image placed on the left side, and the rightImage attribute defines the one to be placed on the right side. The width and height attributes should be provided in order to compare images properly by mapping them on top of each other. The rendering of the imageCompare component with the two images with ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required