image-comparator
This is the main shortcode and can be used as the following:
[image-comparator ... ][/image-comparator]The shortcode features the following parameters, since version 2.0 every parameter is optional:
| Parameter | Description |
|---|---|
| left | Url or Id of the left image |
| right | Url or Id of the right image |
| method | The method to use, one of:
|
| left_href | Url the left image will link to.
Will be ignored if the parameter link_images is set to true.
|
| left_alt | “alt” attribute of the image tag |
| left_title | “title” attribute of the image tag |
| right_href | Url the right image will link to.
Will be ignored if the parameter link_images is set to true.
|
| right_alt | “alt” attribute of the image tag |
| right_title | “title” attribute of the image tag |
| link_images | Set to true, if the images should be linked to themself (default is false). |
| value | An initial value for the sliders position, use a value between 0 and 100 (default is 50) |
| width | An optional width, use px or % (default is 500px)
Tipp Use a relative width in % to enable responsive behaviour. |
| hover | Enable/disable sliding on mouseover (hover). |
| overlayed_slider | Set to true, to use an overlayed slider (default is false). |
| classes | Optional additinal css classes.Classes can also be used to enable so called “Extras”. You may add one of the following classed to enable its feature:
Have a look at the Extras example page. |
image-comparator-left/right
Since version 2.0 it is possible to use other content than images. For this there are two new shortcodes, which helps you to encapsulate the content: “image-comparator-left” and “image-comparator-right”.
You can use them like the following:
[image-comparator]
[image-comparator-left]
Left Content
[/image-comparator-left]
[/image-comparator]or
[image-comparator]
[image-comparator-right]
Right Content
[/image-comparator-right]
[/image-comparator]or
[image-comparator]
[image-comparator-left]
Left Content
[/image-comparator-left]
[image-comparator-right]
Right Content
[/image-comparator-right]
[/image-comparator]