enfrdeitptrues
Advertising

ImageComparison

{ImageComparison orientation="enum" offset="number"} two images {/ImageComparison}

You want to highlight the difference between two images? With this tag the two images get overlapped and you can view the differences with a slider.

The tag uses the twentytwenty library from Zurb.

Params for ImageComparison:

orientation: Sepcifies if the slider should be moveable up and down (vertical) or to the left and right side (horizontal)

possible values: horizontal, vertical

default: horizontal

offset: Defines how far the slider from the left or top side should be.

possible values: from 0.0 to 1

default: 0.5

How to use it:

{ImageComparison}

{ImageComparison}

{ImageComparison orientation="vertical" offset="0.75"}
<img src="/images/before.jpg" alt="" width="300" height="300">
<img src="/images/after.jpg" alt="" width="300" height="300">
{/ImageComparison}


Example:


Available for:

Advertising

© 2010 - 2017 FINWICK® UG

We have 17 guests and no members online

enfrdeitptrues