Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/* juxtapose - v1.2.0 - 2017-12-18
* Copyright (c) 2017 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;i0&&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);setText(label,labelText);element.appendChild(label)},displayCredits:function(){credit=document.createElement("div");credit.className="jx-credit";text="Photo Credits:";if(this.imgBefore.credit){text+=" Before "+this.imgBefore.credit}if(this.imgAfter.credit){text+=" After "+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){if(dims.height=1){this.wrapper.style.paddingTop=parseInt((window.innerHeight-dims.height)/2)+"px"}}else if(dims.height>window.innerHeight){dims=this.calculateDims(0,window.innerHeight);this.wrapper.style.paddingLeft=parseInt((window.innerWidth-dims.width)/2)+"px"}if(this.options.showCredits){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.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 slider.wrapper === a.getJQ().get(0))[0];
*
* // Smoothly move the slider to the right.
* slider.updateSlider("80%", true);
* ```
*
* @interface {PrimeFaces.widget.ImageCompareCfg} cfg The configuration for the {@link ImageCompare| ImageCompare widget}.
* You can access this configuration via {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this
* configuration is usually meant to be read-only and should not be modified.
* @extends {PrimeFaces.widget.BaseWidgetCfg} cfg
*
* @prop {boolean} cfg.showFullLinks Whether image links are shown completely or abbreviated.
* @prop {string} cfg.leftImage URL of the image to the left
* @prop {string} cfg.rightImage URL of the image to the right
*/
PrimeFaces.widget.ImageCompare = PrimeFaces.widget.BaseWidget.extend({
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
init: function(cfg) {
this._super(cfg);
this.cfg.showFullLinks = false;
new juxtapose.JXSlider("[id='"+this.cfg.id+"']",
[
{
src: this.cfg.leftimage,
label: '',
credit: ''
},
{
src: this.cfg.rightimage,
label: '',
credit: ''
}
],
{
animate: true,
showLabels: false,
showCredits: false,
startingPosition: "50%",
makeResponsive: false
});
}
});
