<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="juxtapose">
<img src="http://online.wsj.com/media/LIONDOORA.jpg" data-label="2009" alt="" />
<img src="http://online.wsj.com/media/LIONDOOR_2A.jpg" data-label="2014" alt=""/>
</div>
.juxtapose {
max-width: 600px;
}
.jx-slider {
margin-top: 1em;
}
div.juxtapose {
width: 100%;
font-family: Helvetica, Arial, sans-serif;
}
div.jx-slider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
color: #f3f3f3;
}
div.jx-handle {
position: absolute;
height: 100%;
width: 40px;
cursor: col-resize;
z-index: 15;
margin-left: -20px;
}
.vertical div.jx-handle {
height: 40px;
width: 100%;
cursor: row-resize;
margin-top: -20px;
margin-left: 0;
}
div.jx-control {
height: 100%;
margin-right: auto;
margin-left: auto;
width: 3px;
background-color: currentColor;
}
.vertical div.jx-control {
height: 3px;
width: 100%;
background-color: currentColor;
position: relative;
top: 50%;
transform: translateY(-50%);
}
div.jx-controller {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
height: 60px;
width: 9px;
margin-left: -3px;
background-color: currentColor;
}
.vertical div.jx-controller {
height: 9px;
width: 100px;
margin-left: auto;
margin-right: auto;
top: -3px;
position: relative;
}
div.jx-arrow {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 0;
height: 0;
transition: all .2s ease;
}
.vertical div.jx-arrow {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
width: 0;
height: 0;
transition: all .2s ease;
}
div.jx-arrow.jx-left {
left: 2px;
border-style: solid;
border-width: 8px 8px 8px 0;
border-color: transparent currentColor transparent transparent;
}
div.jx-arrow.jx-right {
right: 2px;
border-style: solid;
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent currentColor;
}
.vertical div.jx-arrow.jx-left {
left: 0px;
top: 2px;
border-style: solid;
border-width: 0px 8px 8px 8px;
border-color: transparent transparent currentColor transparent;
}
.vertical div.jx-arrow.jx-right {
right: 0px;
top: auto;
bottom: 2px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: currentColor transparent transparent transparent;
}
div.jx-handle:hover div.jx-arrow.jx-left,
div.jx-handle:active div.jx-arrow.jx-left {
left: -1px;
}
div.jx-handle:hover div.jx-arrow.jx-right,
div.jx-handle:active div.jx-arrow.jx-right {
right: -1px;
}
.vertical div.jx-handle:hover div.jx-arrow.jx-left,
.vertical div.jx-handle:active div.jx-arrow.jx-left {
left: 0px;
top: 0px;
}
.vertical div.jx-handle:hover div.jx-arrow.jx-right,
.vertical div.jx-handle:active div.jx-arrow.jx-right {
right: 0px;
bottom: 0px;
}
div.jx-image {
position: absolute;
height: 100%;
display: inline-block;
top: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.vertical div.jx-image {
width: 100%;
left: 0;
top: auto;
}
div.jx-image img {
height: 100%;
width: auto;
z-index: 5;
position: absolute;
margin-bottom: 0;
max-height: none;
max-width: none;
max-height: initial;
max-width: initial;
}
.vertical div.jx-image img {
height: auto;
width: 100%;
}
div.jx-image.jx-left {
left: 0;
background-position: left;
}
div.jx-image.jx-left img {
left: 0;
}
div.jx-image.jx-right {
right: 0;
background-position: right;
}
div.jx-image.jx-right img {
right: 0;
bottom: 0;
}
.veritcal div.jx-image.jx-left {
top: 0;
background-position: top;
}
.veritcal div.jx-image.jx-left img {
top: 0;
}
.vertical div.jx-image.jx-right {
bottom: 0;
background-position: bottom;
}
.veritcal div.jx-image.jx-right img {
bottom: 0;
}
div.jx-image div.jx-label {
font-size: 1em;
padding: .25em .75em;
position: relative;
display: inline-block;
top: 0;
background-color: #000; /* IE 8 */
background-color: rgba(0,0,0,.7);
color: white;
z-index: 10;
white-space: nowrap;
line-height: 18px;
vertical-align: middle;
}
div.jx-image.jx-left div.jx-label {
float: left;
left: 0;
}
div.jx-image.jx-right div.jx-label {
float: right;
right: 0;
}
.vertical div.jx-image div.jx-label {
display: table;
position: absolute;
}
.vertical div.jx-image.jx-right div.jx-label {
left: 0;
bottom: 0;
top: auto;
}
div.jx-credit {
line-height: 1.1;
font-size: 0.75em;
}
div.jx-credit em {
font-weight: bold;
font-style: normal;
}
/* Animation */
div.jx-image.transition {
transition: width .5s ease;
}
div.jx-handle.transition {
transition: left .5s ease;
}
.vertical div.jx-image.transition {
transition: height .5s ease;
}
.vertical div.jx-handle.transition {
transition: top .5s ease;
}
/* Knight Lab Credit */
a.jx-knightlab {
background-color: #000; /* IE 8 */
background-color: rgba(0,0,0,.25);
bottom: 0;
display: table;
height: 14px;
line-height: 14px;
padding: 1px 4px 1px 5px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 10;
}
a.jx-knightlab div.knightlab-logo {
display: inline-block;
vertical-align: middle;
height: 8px;
width: 8px;
background-color: #c34528;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: -1.25px;
position: relative;
cursor: pointer;
}
a.jx-knightlab:hover {
background-color: #000; /* IE 8 */
background-color: rgba(0,0,0,.35);
}
a.jx-knightlab:hover div.knightlab-logo {
background-color: #ce4d28;
}
a.jx-knightlab span.juxtapose-name {
display: table-cell;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
color: white;
font-size: 10px;
padding-left: 0.375em;
vertical-align: middle;
line-height: normal;
text-shadow: none;
}
/* keyboard accessibility */
div.jx-controller:focus,
div.jx-image.jx-left div.jx-label:focus,
div.jx-image.jx-right div.jx-label:focus,
a.jx-knightlab:focus {
background: #eae34a;
color: #000;
}
a.jx-knightlab:focus span.juxtapose-name{
color: #000;
border: none;
}
/* juxtapose - v1.1.2 - 2015-07-16
* Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
*/
(function (document, window) {
var juxtapose = {
sliders: [],
OPTIMIZATION_ACCEPTED: 1,
OPTIMIZATION_WAS_CONSTRAINED: 2
};
var flickr_key = "d90fc2d1f4acc584e08b8eaea5bf4d6c";
var FLICKR_SIZE_PREFERENCES = ['Large', 'Medium'];
function Graphic(properties, slider) {
var self = this;
this.image = new Image();
this.loaded = false;
this.image.onload = function() {
self.loaded = true;
slider._onLoaded();
};
this.image.src = properties.src;
this.image.alt = properties.alt || '';
this.label = properties.label || false;
this.credit = properties.credit || false;
}
function FlickrGraphic(properties, slider) {
var self = this;
this.image = new Image();
this.loaded = false;
this.image.onload = function() {
self.loaded = true;
slider._onLoaded();
};
this.flickrID = this.getFlickrID(properties.src);
this.callFlickrAPI(this.flickrID, self);
this.label = properties.label || false;
this.credit = properties.credit || false;
}
FlickrGraphic.prototype = {
getFlickrID: function(url) {
if (url.match(/flic.kr\/.+/i)) {
var encoded = url.split('/').slice(-1)[0];
return base58Decode(encoded);
}
var idx = url.indexOf("flickr.com/photos/");
var pos = idx + "flickr.com/photos/".length;
var photo_info = url.substr(pos);
if (photo_info.indexOf('/') == -1) return null;
if (photo_info.indexOf('/') === 0) photo_info = photo_info.substr(1);
id = photo_info.split("/")[1];
return id;
},
callFlickrAPI: function(id, self) {
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes' +
'&api_key=' + flickr_key +
'&photo_id=' + id + '&format=json&nojsoncallback=1';
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400){
data = JSON.parse(request.responseText);
var flickr_url = self.bestFlickrUrl(data.sizes.size);
self.setFlickrImage(flickr_url);
} else {
console.error("There was an error getting the picture from Flickr");
}
};
request.onerror = function() {
console.error("There was an error getting the picture from Flickr");
};
request.send();
},
setFlickrImage: function(src) {
this.image.src = src;
},
bestFlickrUrl: function(ary) {
var dict = {};
for (var i = 0; i < ary.length; i++) {
dict[ary[i].label] = ary[i].source;
}
for (var j = 0; j < FLICKR_SIZE_PREFERENCES.length; j++) {
if (FLICKR_SIZE_PREFERENCES[j] in dict) {
return dict[FLICKR_SIZE_PREFERENCES[j]];
}
}
return ary[0].source;
}
};
function getNaturalDimensions(DOMelement) {
if (DOMelement.naturalWidth && DOMelement.naturalHeight) {
return {width: DOMelement.naturalWidth, height: DOMelement.naturalHeight};
}
// http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
var img = new Image();
img.src = DOMelement.src;
return {width: img.width, height: img.height};
}
function getImageDimensions(img) {
var dimensions = {
width: getNaturalDimensions(img).width,
height: getNaturalDimensions(img).height,
aspect: function() { return (this.width / this.height); }
};
return dimensions;
}
function addClass(element, c) {
if (element.classList) {
element.classList.add(c);
} else {
element.className += " " + c;
}
}
function removeClass(element, c) {
element.className = element.className.replace(/(\S+)\s*/g, function (w, match) {
if (match === c) {
return '';
}
return w;
}).replace(/^\s+/, '');
}
function setText(element, text) {
if (document.body.textContent) {
element.textContent = text;
} else {
element.innerText = text;
}
}
function getComputedWidthAndHeight(element) {
if (window.getComputedStyle) {
return {
width: parseInt(getComputedStyle(element).width, 10),
height: parseInt(getComputedStyle(element).height, 10)
};
} else {
w = element.getBoundingClientRect().right - element.getBoundingClientRect().left;
h = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top;
return {
width: parseInt(w, 10) || 0,
height: parseInt(h, 10) || 0
};
}
}
function viewport() {
var e = window, a = 'inner';
if ( !( 'innerWidth' in window ) ) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
function getPageX(e) {
var pageX;
if (e.pageX) {
pageX = e.pageX;
} else if (e.touches) {
pageX = e.touches[0].pageX;
} else {
pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
}
return pageX;
}
function getPageY(e) {
var pageY;
if (e.pageY) {
pageY = e.pageY;
} else if (e.touches) {
pageY = e.touches[0].pageY;
} else {
pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return pageY;
}
function checkFlickr(url) {
if (url.match(/flic.kr\/.+/i)) {
return true;
}
var idx = url.indexOf("flickr.com/photos/");
if (idx == -1) {
return false;
} else {
return true;
}
}
function base58Decode(encoded) {
var alphabet = '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ',
base = alphabet.length;
if (typeof encoded !== 'string') {
throw '"base58Decode" only accepts strings.';
}
var decoded = 0;
while (encoded) {
var alphabetPosition = alphabet.indexOf(encoded[0]);
if (alphabetPosition < 0) {
throw '"base58Decode" can\'t find "' + encoded[0] + '" in the alphabet: "' + alphabet + '"';
}
var powerOf = encoded.length - 1;
decoded += alphabetPosition * (Math.pow(base, powerOf));
encoded = encoded.substring(1);
}
return decoded.toString();
}
function getLeftPercent(slider, input) {
if (typeof(input) === "string" || typeof(input) === "number") {
leftPercent = parseInt(input, 10);
} else {
var sliderRect = slider.getBoundingClientRect();
var offset = {
top: sliderRect.top + document.body.scrollTop + document.documentElement.scrollTop,
left: sliderRect.left + document.body.scrollLeft + document.documentElement.scrollLeft
};
var width = slider.offsetWidth;
var pageX = getPageX(input);
var relativeX = pageX - offset.left;
leftPercent = (relativeX / width) * 100;
}
return leftPercent;
}
function getTopPercent(slider, input) {
if (typeof(input) === "string" || typeof(input) === "number") {
topPercent = parseInt(input, 10);
} else {
var sliderRect = slider.getBoundingClientRect();
var offset = {
top: sliderRect.top + document.body.scrollTop + document.documentElement.scrollTop,
left: sliderRect.left + document.body.scrollLeft + document.documentElement.scrollLeft
};
var width = slider.offsetHeight;
var pageY = getPageY(input);
var relativeY = pageY - offset.top;
topPercent = (relativeY / width) * 100;
}
return topPercent;
}
// values of BOOLEAN_OPTIONS are ignored. just used for 'in' test on keys
var BOOLEAN_OPTIONS = {'animate': true, 'showLabels': true, 'showCredits': true, 'makeResponsive': true };
function interpret_boolean(x) {
if (typeof(x) != 'string') {
return Boolean(x);
}
return !(x === 'false' || x === '');
}
function JXSlider(selector, images, options) {
this.selector = selector;
var i;
this.options = { // new options must have default values set here.
animate: true,
showLabels: true,
showCredits: true,
makeResponsive: true,
startingPosition: "50%",
mode: 'horizontal',
callback: null // pass a callback function if you like
};
for (i in this.options) {
if(i in options) {
if (i in BOOLEAN_OPTIONS) {
this.options[i] = interpret_boolean(options[i]);
} else {
this.options[i] = options[i];
}
}
}
if (images.length == 2) {
if(checkFlickr(images[0].src)) {
this.imgBefore = new FlickrGraphic(images[0], this);
} else {
this.imgBefore = new Graphic(images[0], this);
}
if(checkFlickr(images[1].src)) {
this.imgAfter = new FlickrGraphic(images[1], this);
} else {
this.imgAfter = new Graphic(images[1], this);
}
} else {
console.warn("The images parameter takes two Image objects.");
}
if (this.imgBefore.credit || this.imgAfter.credit) {
this.options.showCredits = true;
} else {
this.options.showCredits = false;
}
}
JXSlider.prototype = {
updateSlider: function(input, animate) {
var leftPercent, rightPercent;
if (this.options.mode === "vertical") {
leftPercent = getTopPercent(this.slider, input);
} else {
leftPercent = getLeftPercent(this.slider, input);
}
leftPercent = leftPercent.toFixed(2) + "%";
leftPercentNum = parseFloat(leftPercent);
rightPercent = (100 - leftPercentNum) + "%";
if (leftPercentNum > 0 && leftPercentNum < 100) {
removeClass(this.handle, 'transition');
removeClass(this.rightImage, 'transition');
removeClass(this.leftImage, 'transition');
if (this.options.animate && animate) {
addClass(this.handle, 'transition');
addClass(this.leftImage, 'transition');
addClass(this.rightImage, 'transition');
}
if (this.options.mode === "vertical") {
this.handle.style.top = leftPercent;
this.leftImage.style.height = leftPercent;
this.rightImage.style.height = rightPercent;
} else {
this.handle.style.left = leftPercent;
this.leftImage.style.width = leftPercent;
this.rightImage.style.width = rightPercent;
}
this.sliderPosition = leftPercent;
}
},
getPosition: function() {
return this.sliderPosition;
},
displayLabel: function(element, labelText) {
label = document.createElement("div");
label.className = 'jx-label';
label.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
setText(label, labelText);
element.appendChild(label);
},
displayCredits: function() {
credit = document.createElement("div");
credit.className = "jx-credit";
text = "<em>Photo Credits:</em>";
if (this.imgBefore.credit) { text += " <em>Before</em> " + this.imgBefore.credit; }
if (this.imgAfter.credit) { text += " <em>After</em> " + this.imgAfter.credit; }
credit.innerHTML = text;
this.wrapper.appendChild(credit);
},
setStartingPosition: function(s) {
this.options.startingPosition = s;
},
checkImages: function() {
if (getImageDimensions(this.imgBefore.image).aspect() ==
getImageDimensions(this.imgAfter.image).aspect()) {
return true;
} else {
return false;
}
},
calculateDims: function(width, height){
var ratio = getImageDimensions(this.imgBefore.image).aspect();
if (width) {
height = width / ratio;
} else if (height) {
width = height * ratio;
}
return {
width: width,
height: height,
ratio: ratio
};
},
responsivizeIframe: function(dims){
//Check the slider dimensions against the iframe (window) dimensions
if (dims.height < window.innerHeight){
//If the aspect ratio is greater than 1, imgs are landscape, so letterbox top and bottom
if (dims.ratio >= 1){
this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + "px";
}
} else if (dims.height > window.innerHeight) {
/* If the image is too tall for the window, which happens at 100% width on large screens,
* force dimension recalculation based on height instead of width */
dims = this.calculateDims(0, window.innerHeight);
this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + "px";
}
if (this.options.showCredits) {
// accommodate the credits box within the iframe
dims.height -= 13;
}
return dims;
},
setWrapperDimensions: function() {
var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width;
var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height;
var dims = this.calculateDims(wrapperWidth, wrapperHeight);
// if window is in iframe, make sure images don't overflow boundaries
if (window.location !== window.parent.location && !this.options.makeResponsive) {
dims = this.responsivizeIframe(dims);
}
this.wrapper.style.height = parseInt(dims.height) + "px";
this.wrapper.style.width = parseInt(dims.width) + "px";
},
optimizeWrapper: function(maxWidth){
var result = juxtapose.OPTIMIZATION_ACCEPTED;
if ((this.imgBefore.image.naturalWidth >= maxWidth) && (this.imgAfter.image.naturalWidth >= maxWidth)) {
this.wrapper.style.width = maxWidth + "px";
result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED;
} else if (this.imgAfter.image.naturalWidth < maxWidth) {
this.wrapper.style.width = this.imgAfter.image.naturalWidth + "px";
} else {
this.wrapper.style.width = this.imgBefore.image.naturalWidth + "px";
}
this.setWrapperDimensions();
return result;
},
_onLoaded: function() {
if (this.imgBefore && this.imgBefore.loaded === true &&
this.imgAfter && this.imgAfter.loaded === true) {
this.wrapper = document.querySelector(this.selector);
addClass(this.wrapper, 'juxtapose');
this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width;
this.setWrapperDimensions();
this.slider = document.createElement("div");
this.slider.className = 'jx-slider';
this.wrapper.appendChild(this.slider);
if (this.options.mode != "horizontal") {
addClass(this.slider, this.options.mode);
}
this.handle = document.createElement("div");
this.handle.className = 'jx-handle';
this.rightImage = document.createElement("div");
this.rightImage.className = 'jx-image jx-right';
this.rightImage.appendChild(this.imgAfter.image);
this.leftImage = document.createElement("div");
this.leftImage.className = 'jx-image jx-left';
this.leftImage.appendChild(this.imgBefore.image);
this.labCredit = document.createElement("a");
this.labCredit.setAttribute('href', 'http://juxtapose.knightlab.com');
this.labCredit.setAttribute('target', '_blank');
this.labCredit.className = 'jx-knightlab';
this.labLogo = document.createElement("div");
this.labLogo.className = 'knightlab-logo';
this.labCredit.appendChild(this.labLogo);
this.projectName = document.createElement("span");
this.projectName.className = 'juxtapose-name';
setText(this.projectName, 'JuxtaposeJS');
this.labCredit.appendChild(this.projectName);
this.slider.appendChild(this.handle);
this.slider.appendChild(this.leftImage);
this.slider.appendChild(this.rightImage);
this.slider.appendChild(this.labCredit);
this.leftArrow = document.createElement("div");
this.rightArrow = document.createElement("div");
this.control = document.createElement("div");
this.controller = document.createElement("div");
this.leftArrow.className = 'jx-arrow jx-left';
this.rightArrow.className = 'jx-arrow jx-right';
this.control.className = 'jx-control';
this.controller.className = 'jx-controller';
this.controller.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
this.controller.setAttribute('role', 'slider');
this.controller.setAttribute('aria-valuenow', 50);
this.controller.setAttribute('aria-valuemin', 0);
this.controller.setAttribute('aria-valuemax', 100);
this.handle.appendChild(this.leftArrow);
this.handle.appendChild(this.control);
this.handle.appendChild(this.rightArrow);
this.control.appendChild(this.controller);
this._init();
}
},
_init: function() {
if (this.checkImages() === false) {
console.warn(this, "Check that the two images have the same aspect ratio for the slider to work correctly.");
}
this.updateSlider(this.options.startingPosition, false);
if (this.options.showLabels === true) {
if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); }
if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); }
}
if (this.options.showCredits === true) {
this.displayCredits();
}
var self = this;
window.addEventListener("resize", function() {
self.setWrapperDimensions();
});
// Set up Javascript Events
// On mousedown, call updateSlider then set animate to false
// (if animate is true, adds css transition when updating).
this.slider.addEventListener("mousedown", function(e) {
e = e || window.event;
e.preventDefault();
self.updateSlider(e, true);
animate = true;
this.addEventListener("mousemove", function(e) {
e = e || window.event;
e.preventDefault();
if (animate) { self.updateSlider(e, false); }
});
this.addEventListener('mouseup', function(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
this.removeEventListener('mouseup', arguments.callee);
animate = false;
});
});
this.slider.addEventListener("touchstart", function(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
self.updateSlider(e, true);
this.addEventListener("touchmove", function(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
self.updateSlider(event, false);
});
});
/* keyboard accessibility */
this.handle.addEventListener("keydown", function (e) {
e = e || window.event;
var key = e.which || e.keyCode;
var ariaValue = parseFloat(this.style.left);
//move jx-controller left
if (key == 37) {
ariaValue = ariaValue - 1;
var leftStart = parseFloat(this.style.left) - 1;
self.updateSlider(leftStart, false);
self.controller.setAttribute('aria-valuenow', ariaValue);
}
//move jx-controller right
if (key == 39) {
ariaValue = ariaValue + 1;
var rightStart = parseFloat(this.style.left) + 1;
self.updateSlider(rightStart, false);
self.controller.setAttribute('aria-valuenow', ariaValue);
}
});
//toggle right-hand image visibility
this.leftImage.addEventListener("keydown", function (event) {
var key = event.which || event.keyCode;
if ((key == 13) || (key ==32)) {
self.updateSlider("90%", true);
self.controller.setAttribute('aria-valuenow', 90);
}
});
//toggle left-hand image visibility
this.rightImage.addEventListener("keydown", function (event) {
var key = event.which || event.keyCode;
if ((key == 13) || (key ==32)) {
self.updateSlider("10%", true);
self.controller.setAttribute('aria-valuenow', 10);
}
});
juxtapose.sliders.push(this);
if (this.options.callback && typeof(this.options.callback) == 'function') {
this.options.callback(this);
}
}
};
/*
Given an element that is configured with the proper data elements, make a slider out of it.
Normally this will just be used by scanPage.
*/
juxtapose.makeSlider = function (element, idx) {
if (typeof idx == 'undefined') {
idx = juxtapose.sliders.length; // not super threadsafe...
}
var w = element;
var images = w.querySelectorAll('img');
var options = {};
// don't set empty string into options, that's a false false.
if (w.getAttribute('data-animate')) {
options.animate = w.getAttribute('data-animate');
}
if (w.getAttribute('data-showlabels')) {
options.showLabels = w.getAttribute('data-showlabels');
}
if (w.getAttribute('data-showcredits')) {
options.showCredits = w.getAttribute('data-showcredits');
}
if (w.getAttribute('data-startingposition')) {
options.startingPosition = w.getAttribute('data-startingposition');
}
if (w.getAttribute('data-mode')) {
options.mode = w.getAttribute('data-mode');
}
if (w.getAttribute('data-makeresponsive')) {
options.mode = w.getAttribute('data-makeresponsive');
}
specificClass = 'juxtapose-' + idx;
addClass(element, specificClass);
selector = '.' + specificClass;
if (w.innerHTML) {
w.innerHTML = '';
} else {
w.innerText = '';
}
slider = new juxtapose.JXSlider(
selector,
[
{
src: images[0].src,
label: images[0].getAttribute('data-label'),
credit: images[0].getAttribute('data-credit'),
alt: images[0].alt
},
{
src: images[1].src,
label: images[1].getAttribute('data-label'),
credit: images[1].getAttribute('data-credit'),
alt: images[1].alt
}
],
options
);
};
//Enable HTML Implementation
juxtapose.scanPage = function() {
var elements = document.querySelectorAll('.juxtapose');
for (var i = 0; i < elements.length; i++) {
juxtapose.makeSlider(elements[i], i);
}
};
juxtapose.JXSlider = JXSlider;
window.juxtapose = juxtapose;
juxtapose.scanPage();
}(document, window));
// addEventListener polyfill / jonathantneal
!window.addEventListener && (function (WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) {
WindowPrototype[addEventListener] = DocumentPrototype[addEventListener] = ElementPrototype[addEventListener] = function (type, listener) {
var target = this;
registry.unshift([target, type, listener, function (event) {
event.currentTarget = target;
event.preventDefault = function () { event.returnValue = false };
event.stopPropagation = function () { event.cancelBubble = true };
event.target = event.srcElement || target;
listener.call(target, event);
}]);
this.attachEvent("on" + type, registry[0][3]);
};
WindowPrototype[removeEventListener] = DocumentPrototype[removeEventListener] = ElementPrototype[removeEventListener] = function (type, listener) {
for (var index = 0, register; register = registry[index]; ++index) {
if (register[0] == this && register[1] == type && register[2] == listener) {
return this.detachEvent("on" + type, registry.splice(index, 1)[0][3]);
}
}
};
WindowPrototype[dispatchEvent] = DocumentPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = function (eventObject) {
return this.fireEvent("on" + eventObject.type, eventObject);
};
})(Window.prototype, HTMLDocument.prototype, Element.prototype, "addEventListener", "removeEventListener", "dispatchEvent", []);
