Jekyll include for JuxtaposeJS

juxtapose-include.md

{% include juxtapose.html data-startingposition="" data-showlabels="" data-showcredits="" data-animate="" first-image="" first-data-label="" first-data-credit="" second-image="" second-data-label="" second-data-credit="" %}

juxtapose.html

<!--
JuxtaposeJS
JuxtaposeJS is a simple, open source tool for creating before/after image sliders.
Just provide two image URLs and Juxtapose will do the rest of the work for you.
-->

<div class="juxtapose"
{% if include.data-startingposition %} data-startingposition="{{ include.data-startingposition }}" {% endif %}
{% if include.data-showlabels %} data-showlabels="{{ include.data-showlabels }}" {% endif %}
{% if include.data-showcredits %} data-showcredits="{{ include.data-showcredits }}" {% endif %}
{% if include.data-showcredits %} data-animate="{{ include.data-animate }}" {% endif %}
>

  <!--
  Specifying a starting position with data-startingposition lets you focus the users attention on the part of the image where the change is most noticeable.
  To toggle the visibility of the labels and the credits respectively, set data-showlabels and data-showcredits to false.
  And to disable the animation, set data-animate to false.
  -->

      <img src="{{ include.first-image }}"
      {% if include.first-data-label %} data-label="{{ include.first-data-label }}" {% endif %}
      {% if include.first-data-credit %} data-credit="{{ include.first-data-credit }}" {% endif %}
      />
      <img src="{{ include.second-image }}"
      {% if include.second-data-label %} data-label="{{ include.second-data-label }}" {% endif %}
      {% if include.second-data-credit %} data-credit="{{ include.second-data-credit }}" {% endif %}
      />

    	<!--
      If each image has an data-label attribute defined, the slider will display a label on each image.
      If each image has a data-credit attribute defined, the slider will display a credit for each image.
      -->

</div>

<!-- Juxtapose is available on the Knight Lab CDN. -->

<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">