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.
|
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)
|
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:
|
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]