Fandom Developers Wiki
Advertisement

ImageCompare (название вдохновлено одноимённым расширением для MediaWiki) позволяет перекрывать одно изображения другим при помощи слайдера для их сравнения.

Установка[]

Использование[]

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

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

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

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

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

Пример[]

Код:
<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=Текст описания}}
Конечный результат:
WikiUpGreenForest
WikiUpBrightBlue

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

Advertisement