imageplayer.min.js

var ImagePlayer=function(t){var e=void 0===t.element?null:t.element,s=void 0===t.images?[]:t.images,l=void 0===t.align?"center":t.align,n=void 0===t.width?"":t.width,i=void 0===t.height?"":t.height,o=void 0===t.interval?300:t.interval,c=void 0===t.autoplay?1:t.autoplay,r=void 0===t.control?1:t.controls,g=void 0===t.bgcolor?"#ffffff":t.bgcolor,a=void 0===t.bgcolor?"#383838":t.fsbgcolor,h=void 0===t.closebgcolor?"rgba(56, 56, 56, 0.5)":t.closebgcolor,_=void 0===t.closecolor?"#ffffff":t.closecolor,m=void 0===t.icondir?"images":t.icondir,d=void 0===t.startindex?0:t.startindex,y=this;for(var p in this.element=document.getElementById(e),this._style={},this._width=this.element.style.width||n,this._height=this.element.style.height||i,this._fullscreen=!1,this._align=l,this.bgcolor=g,this.fsbgcolor=a,this.closebgcolor=h,this.closecolor=_,this._fsclose=null,this._img=null,this._imgstyle={},this.images=s,this.length=this.images.length,this._fetched=[],this.index=null,this.prev=null,this.next=null,this.interval=o,this._timeout=null,this.autoplay=c,this.controls=r,this._controls=document.createElement("div"),this._controlsheight=35,this._controlpadding=5,this._controlheight=this._controlsheight-2*this._controlpadding,this._controlsplay=null,this._controlsfull=null,this._controlsfirst=null,this._controlslast=null,this._controlsprev=null,this._controlsnext=null,this.icondir=m,this._icons={play:"play.png",pause:"pause.png",full:"full.png",first:"first.png",last:"last.png",prev:"prev.png",next:"next.png"},_tmp_icons={},this._icons){var f=this.icondir+"/",u=new RegExp(".png$","g"),v=this._icons[p],x="fs_"+v,I=v.toString().replace(u,"_hover.png"),w="fs_"+I;_tmp_icons[p]=f+v,_tmp_icons[p+"hover"]=f+I,_tmp_icons["fs"+p]=f+x,_tmp_icons["fs"+p+"hover"]=f+w}this._icons=_tmp_icons,delete _tmp_icons,this.state="stopped",d<0&&(d=this.length+d),d>this.length-1&&(d=0),this.startindex=d,this._setIndexes=function(t,e){t.index=e,0==e?(t.prev=t.length-1,t.next=1%t.length):(t.prev=e-1,t.next=(e+1)%t.length)},this.setIndexes=function(t){y._setIndexes(y,t)},this._fetchImages=function(t,e){for(var s=0;s<e.length;s++)if(-1==t._fetched.indexOf(e[s])){var l=new XMLHttpRequest;l.open("GET",t.images[e[s]],!0),l.send(null),t._fetched.push(e[s])}},this.fetchImages=function(t){y._fetchImages(y,t)},this._fetchIconImages=function(t,e){var s=[];for(var l in t._icons)s.push(t._icons[l]);t.fetchImages(s)},this.fetchIconImages=function(t){y._fetchIconImages(y,t)},this._setImage=function(t){t._img.src=t.images[t.index],"playing"==t.state?t._img.onload=function(){1==t.controls&&t.setControlsWidth(),t._timeout=setTimeout(t.nextImage,t.interval)}:t._img.onload=function(){1==t.controls&&t.setControlsWidth()}},this.setImage=function(){y._setImage(y)},this._prevImage=function(t){t.setIndexes(t.prev),t.setImage(),t.fetchImages([t.prev])},this.prevImage=function(){y._prevImage(y)},this._nextImage=function(t){t.setIndexes(t.next),t.setImage(),t.fetchImages([t.next])},this.nextImage=function(){y._nextImage(y)},this._firstImage=function(t){t.setIndexes(0),t.setImage()},this.firstImage=function(){y._firstImage(y)},this._lastImage=function(t){t.setIndexes(t.length-1),t.setImage()},this.lastImage=function(){y._lastImage(y)},this._play=function(t){"playing"!=t.state&&(t.state="playing",t.nextImage(),1==t.controls&&(t._fullscreen?t._controlsplay.src=t._icons.fspause:t._controlsplay.src=t._icons.pause,t._controlsplay.removeEventListener("click",t.play),t._controlsplay.addEventListener("click",t.stop),t._controlsfirst.style.visibility="hidden",t._controlsprev.style.visibility="hidden",t._controlsnext.style.visibility="hidden",t._controlslast.style.visibility="hidden"))},this.play=function(){y._play(y)},this._stop=function(t){"stopped"!=t.state&&(clearTimeout(t._timeout),t.state="stopped",1==t.controls&&(t._fullscreen?t._controlsplay.src=t._icons.fsplay:t._controlsplay.src=t._icons.play,t._controlsplay.removeEventListener("click",t.stop),t._controlsplay.addEventListener("click",t.play),t._controlsfirst.style.visibility="visible",t._controlsprev.style.visibility="visible",t._controlsnext.style.visibility="visible",t._controlslast.style.visibility="visible"))},this.stop=function(){y._stop(y)},this._getStyles=function(t){for(var e=0;e<t.element.style.length;e++){var s=t.element.style[e];t._style[s]=t.element.style[s]}t._style.width=getComputedStyle(t.element).width,t._style.height=getComputedStyle(t.element).height;for(e=0;e<t._img.style.length;e++){s=t._img.style[e];t._imgstyle[s]=t._img.style[s]}t._imgstyle.width=getComputedStyle(t._img).width,t._imgstyle.height=getComputedStyle(t._img).height},this.getStyles=function(){y._getStyles(y)},this._resetStyles=function(t){for(var e in t._img.removeAttribute("style"),t._imgstyle)t._img.style[e]=t._imgstyle[e];for(var e in t.element.removeAttribute("style"),t._style)t.element.style[e]=t._style[e]},this.resetStyles=function(){y._resetStyles(y)},this._checkImageDimensions=function(t){t.element.width>window.innerWidth&&(t.element.style.width=window.innerWidth-10+"px"),t._img.width>window.innerWidth&&(t._img.style.width=window.innerWidth-10+"px"),t.element.height>window.innerWidth&&(t.element.style.height=window.innerWidth-10+"px"),t._img.height>window.innerWidth&&(t._img.style.height=window.innerWidth-10+"px")},this.checkImageDimensions=function(){y._checkImageDimensions(y)},this._toggleFullScreenClose=function(t){null==t._fsclose&&(t._fsclose=document.createElement("span"),t.element.appendChild(t._fsclose),t._fsclose.innerHTML="&times;",t._fsclose.style.position="fixed",t._fsclose.style.top="15px",t._fsclose.style.right="15px",t._fsclose.style.color=t.closecolor,t._fsclose.style.backgroundColor=t.closebgcolor,t._fsclose.style.fontSize="xx-large",t._fsclose.style.fontWeight="bold",t._fsclose.style.zIndex=999999,t._fsclose.style.textDecoration="none",t._fsclose.style.cursor="pointer",t._fsclose.style.display="none",t._fsclose.style.width="calc(1em + 10px)",t._fsclose.style.height="calc(1em + 10px)",t._fsclose.addEventListener("click",t.toggleFullScreen),t._fsclose.addEventListener("mouseover",function(){t._fsclose.style.color="#cccccc"}),t._fsclose.addEventListener("mouseout",function(){t._fsclose.style.color=t.closecolor})),t._fullscreen?t._fsclose.style.display="inline-block":t._fsclose.style.display="none"},this.toggleFullScreenClose=function(){y._toggleFullScreenClose(y)},this._toggleFullScreen=function(t){t._fullscreen?(t.resetStyles(),"left"==t._align?(t._img.style.margin="",t._img.style.marginRight="auto",1==t.controls&&(t._controls.style.margin="",t._controls.style.marginRight="auto")):"right"==t._align&&(t._img.style.margin="",t._img.style.marginLeft="auto",1==t.controls&&(t._controls.style.margin="",t._controls.style.marginLeft="auto")),t.checkImageDimensions(),1==t.controls&&(t._controls.style.backgroundColor=t.bgcolor,"playing"==t.state?t._controlsplay.src=t._icons.pause:t._controlsplay.src=t._icons.play,t._controlsfull.src=t._icons.full,t._controlsfirst.src=t._icons.first,t._controlslast.src=t._icons.last,t._controlsprev.src=t._icons.prev,t._controlsnext.src=t._icons.next),t.setControlsWidth(),t.element.style.width=null,t.element.style.height=null,t._img.style.width=null,t._img.style.height=null,t._fullscreen=!1,t.toggleFullScreenClose()):(t.getStyles(),t.element.style.position="fixed",t.element.style.width="100%",t.element.style.height="100%",t.element.style.maxWidth="100%",t.element.style.maxHeight="100%",t.element.style.zIndex=99999,t.element.style.top=0,t.element.style.left=0,t.element.style.backgroundColor=t.fsbgcolor,t.element.style.border="0px",t.element.style.margin="auto",t.element.style.padding="0px",t.element.style.paddingTop="0px",t.element.style.paddingBottom="0px",t.element.style.paddingLeft="0px",t.element.style.paddingRight="0px",t.element.style.alignItems="center",t.element.style.justifyContent="center",t._img.style.paddingTop="10px",t._img.style.paddingBottom="10px",t._img.style.maxHeight="calc(95% - "+t._controlsheight+"px - "+t._img.style.paddingTop+" - "+t._img.style.paddingBottom+")",t._img.style.height="90%",t._img.style.maxWidth="90%",t._img.style.margin="auto",t._img.style.objectFit="contain",1==t.controls&&(t._controls.style.margin="auto",t._controls.style.backgroundColor=t.fsbgcolor,"playing"==t.state?t._controlsplay.src=t._icons.fspause:t._controlsplay.src=t._icons.fsplay,t._controlsfull.src=t._icons.fsfull,t._controlsfirst.src=t._icons.fsfirst,t._controlslast.src=t._icons.fslast,t._controlsprev.src=t._icons.fsprev,t._controlsnext.src=t._icons.fsnext),t._fullscreen=!0,t.toggleFullScreenClose())},this.toggleFullScreen=function(){y._toggleFullScreen(y)},this._addControl=function(t,e,s){var l=t._controlpadding+"px",n=t._controlheight+"px",i=document.createElement("img");return t._controls.appendChild(i),i.src=t._icons[e],i.style.cursor="pointer",i.style.padding=l,i.style.height=n,i.addEventListener("mouseover",function(){"play"==e&&"playing"==t.state?t._fullscreen?i.src=t._icons.fspausehover:i.src=t._icons.pausehover:t._fullscreen?i.src=t._icons["fs"+e+"hover"]:i.src=t._icons[e+"hover"]}),i.addEventListener("mouseout",function(){"play"==e&&"playing"==t.state?t._fullscreen?i.src=t._icons.fspause:i.src=t._icons.pause:t._fullscreen?i.src=t._icons["fs"+e]:i.src=t._icons[e]}),i.addEventListener("click",s),i},this.addControl=function(t,e){return y._addControl(y,t,e)},this._setControlsWidth=function(t){t._controls.style.width=t._img.width+"px"},this.setControlsWidth=function(){y._setControlsWidth(y)},this._addControls=function(t){t._img.style.maxHeight="calc(100% - "+t._controlsheight+"px)";var e=t._controls;t.element.appendChild(e),e.style.maxWidth="100%",e.style.height=t._controlsheight+"px",e.style.backgroundColor=t.bgcolor,e.style.overflow="hidden","left"==t._align?e.style.marginRight="auto":"right"==t._align?e.style.marginLeft="auto":e.style.margin="auto",t._controlsplay=t.addControl("play",t.play),t._controlsfull=t.addControl("full",t.toggleFullScreen),t._controlsfirst=t.addControl("first",t.firstImage),t._controlsprev=t.addControl("prev",t.prevImage),t._controlsnext=t.addControl("next",t.nextImage),t._controlslast=t.addControl("last",t.lastImage)},this.addControls=function(t){y._addControls(y)},this._initPlayer=function(t){t.fetchIconImages(),t.element.style.textAlign="center",t._img=document.createElement("img"),t.element.appendChild(t._img),t._img.style.maxWidth="100%",t._img.style.maxHeight="100%",t._img.style.display="block","left"==t._align?t._img.style.marginRight="auto":"right"==t._align?t._img.style.marginLeft="auto":t._img.style.margin="auto",t.setIndexes(t.startindex),t.setImage(),t._img.onload=function(){t.element.style.maxWidth="95%",t.element.style.maxHeight="95%",t.element.style.top=0,t.element.style.left=0,t.element.style.backgroundColor=t.bgcolor,t.element.style.border="0px",t.element.style.margin="auto",t.element.style.padding="0px",t.element.style.paddingTop="0px",t.element.style.paddingBottom="0px",t.element.style.paddingLeft="0px",t.element.style.paddingRight="0px",t.element.style.alignItems="center",t.element.style.justifyContent="center",t._img.style.paddingTop="10px",t._img.style.paddingBottom="10px",t._img.style.maxHeight="calc(95% - "+t._controlsheight+"px - "+t._img.style.paddingTop+" - "+t._img.style.paddingBottom+")",t._img.style.maxWidth="90%",t._img.style.margin="auto",t._img.style.objectFit="contain",1==t.controls&&(t._controls.style.margin="auto");var e=new RegExp("px","g");t._width=t._width.toString().replace(e,""),t._height=t._height.toString().replace(e,""),""==t._width&&""==t._height?(t._width=t._img.width,t._height=t._img.height):""==t._height?t._height=Math.round(t.width/this.width*this.height):""==t._width&&(t._width=Math.round(t._height/this.height*this.width)),1==t.controls&&(t._width=Math.round((t._height-t._controlsheight)/this.height*this.width),t.addControls()),t.getStyles(),1==t.controls&&(t.setControlsWidth(),window.addEventListener("resize",function(){t._fullscreen?t.setControlsWidth():(t.checkImageDimensions(),t.setControlsWidth(),t.element.style.width=null,t.element.style.height=null,t._img.style.width=null,t._img.style.height=null)}));for(var s=0;s<t.element.style.length;s++){var l=t.element.style[s];t._style[l]=t.element.style[l]}t._img.onload=null,1==t.autoplay?t.play():t.fetchImages([t.prev,t.next])}},this.initPlayer=function(){y._initPlayer(y)},null!=y.element&&y.length>0&&y.initPlayer()};