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 ...
Get PrimeFaces Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.