Installation

Usage

Скрипт ответственен за элементы с определёнными классами. Он ожидает следующую структуру:

• Контейнер с классом img-comp-container.
  • Дочерний элемент с классом img-comp-img, содержащий основное изображение.
  • Другой дочерний элемент с двумя классами img-comp-img и img-comp-overlay, содержащий "перекрывающее" изображение.

Регулирование разрешений

Скрипт ожидает от контейнеров изображений с одинаковой высотой. Высота по-умолчанию задана как 200px, но любая другая высота может быть задана при прописывании высоты в атрибуте style в контейнере, или при помощи изменения набора стилей для этого скрипта. Высота изображений, если она не совпадает, может быть задана стандартной вики-разметкой.

Также рекомендуется выбирать изображения с одинаковым разрешением.

Example

Код:

<div class="box-for-comparison" style="float: right;">
<div class="img-comp-container">
<div class="img-comp-img">[[File:WikiUpGreenForest.png|500px]]</div>
<div class="img-comp-img img-comp-overlay">[[File:WikiUpBrightBlue.png|500px]]</div>
</div>
{{{caption|}}}
</div>

Или шаблон:

<div class="box-for-comparison" style="float: {{{float|right}}};">
<div class="img-comp-container">
<div class="img-comp-img">[[File:{{{right}}}|{{{size|500px}}}{{#ifeq:{{{nolink|0}}}|1|{{!}}link=|}}]]</div>
<div class="img-comp-img img-comp-overlay">[[File:{{{left}}}|{{{size|500px}}}{{#ifeq:{{{nolink|0}}}|1|{{!}}link=|}}]]</div>
</div>
{{{caption|}}}
</div>

Использование шаблона:

{{ImageCompare|right=WikiUpGreenForest.png|left=WikiUpBrightBlue.png|size=500px|caption=Текст описания}}

Конечный результат:

Текст описания