ImageCompare (name inspired by a MediaWiki extension with the same name) allows overlapping two images with a middle slider for easy comparison.
Installation
Usage
The script responds to elements marked by certain classes. The expected structure is:
- A container with the class
"img-comp-container".- A child element with the class
"img-comp-img", containing the base image. - Another child element with the two classes
"img-comp-img img-comp-overlay", containing the overlay image.
- A child element with the class
Adjusting the dimensions
The script expects the container and the images to have the same height. The default height is defined in the stylesheet as 200px, but any other height can be used by setting the style property of the container, or by overriding the default stylesheet with another one. The height of the images, if doesn't match, can be set by the standard wiki markup.
It is also recommended that the two images will have the same dimensions.
Example
- Use this code:
<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>
- Or create template with this code:
<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>
- And use it:
{{ImageCompare|right=WikiUpGreenForest.png|left=WikiUpBrightBlue.png|size=500px|caption=Caption text}}
- Result
Caption text
Text above can be found here (edit)