Краткое описание
Вставляет на страницу два изображения для сравнения (состояния “Before” и “After”), располагая их одно над другим. Соответственно нужно готовить изображения одинакового размера!
Поверх изображений выводится бегунок, перетаскивая который можно открывать части изображений – слева (или сверху) от бегунка видна часть первого изображения (состояние “Before”), а справа (или снизу) – часть второго изображения (состояние “After”).
Внутри бегунка по умолчанию рисуются два треугольника в виде двойной стрелки. Вместо них можно выбирать любую иконку или картинку. Также можно от бегунка в обе стороны показывать разделительную линию или выключать ее.
– drag – разделитель можно перетаскивать мышкой
– move – разделитель перемещается вслед за курсором мыши, когда она над картинкой
Также можно задавать надписи на картинках отдельно для состояний “Before” и “After” и выбирать их положение (9 вариантов). При приближении разделителя к надписи она гаснет, когда разделитель уходит от нее – снова появляется.
Ниже показаны варианты вывода шорткода с различными настройками параметров.
![](https://trex3.themerex.net/wp-content/uploads/2021/03/icompare-params.png)
Images Compare
Вид по умолчанию - ни один параметр не изменен.
Разделительная линия отсутствует
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![After](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon.jpg)
Images Compare
Квадратный разделитель с иконкой на 30%, двигается за мышкой. Также добавлены надписи "Before" и "After".
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![After](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon.jpg)
Images Compare
Выбран горизонтальный разделитель с картинкой внутри.
Также задано перемещение разделителя за курсором мыши
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![After](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon.jpg)
![Handler image](http://trex3.themerex.net/wp-content/uploads/2018/06/Torpedo-los-90x90.jpg)
Images Compare
Квадратный разделитель с иконкой и линией, установленный на 70%. Надписи "Before" и "After" в центре
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![Before](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon-grey.jpg)
![After](http://trex3.themerex.net/wp-content/uploads/2021/03/bg-neon.jpg)