The Shortcodes

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:

ParameterDescription
leftUrl or Id of the left image
rightUrl or Id of the right image
methodThe method to use, one of:

 

  • from-left
  • from-right
  • overlay
  • side-by-side
  • fade-in
  • random
left_hrefUrl the left image will link to.

 

icon-hintWill 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_hrefUrl 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_imagesSet to true, if the images should be linked to themself (default is false).
valueAn initial value for the sliders position, use a value between 0 and 100 (default is 50)
widthAn optional width, use px or % (default is 500px)

 

Tipp

Use a relative width in % to enable responsive behaviour.

hoverEnable/disable sliding on mouseover (hover).
overlayed_sliderSet to true, to use an overlayed slider (default is false).
classesOptional 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:

 

  • “hover”: Slide on mouse move.
  • “overlayed-slider”: Use an overlayed slider instead the slider beneath the images.
  • “smooth”: Makes the slide smooth instead of hard (uses CSS 3 transition, so might not work in every browsers).

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]