diff --git a/README.md b/README.md index 6009a63..5bb753e 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ javaScript and CSS responsive Photo / image viewer window and gallery. ## Demo -[JsFiddle](https://jsfiddle.net/xyxuxbpm/72/) ([Full page](https://jsfiddle.net/xyxuxbpm/72/show/)) or [CodePen](http://codepen.io/vmarci21/pen/MKJOyY) ([Full page](http://codepen.io/vmarci21/full/MKJOyY/)), +[JsFiddle](https://jsfiddle.net/xyxuxbpm/81/) ([Full page](https://jsfiddle.net/xyxuxbpm/81/show/)) or [CodePen](http://codepen.io/vmarci21/pen/MKJOyY) ([Full page](http://codepen.io/vmarci21/full/MKJOyY/)), -[While theme](https://jsfiddle.net/xyxuxbpm/73/show/) +[While theme (version 1.1)](https://jsfiddle.net/xyxuxbpm/73/show/) ## Using @@ -23,6 +23,9 @@ javaScript and CSS responsive Photo / image viewer window and gallery. * Use the showtext function, with this parameter: * First parameter: Title * Second parameter: Full text + +### Options +* Edit option object in script ### example ```javascript diff --git a/script.js b/script.js index 51db2d3..565c3ee 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,17 @@ /*ImagepopUp JS -Version: 1.1 +Version: 1.1.1 http://intomedia.hu https://github.com/vmarci21/PhotoPopUp */ var imagepopup = { +option: { +imageloadingerror_title:'Loading errors', +imageloadingerror_text:'Failed to load the picture :(', +close_element:'x', +open_element: 'Open', +enabled_keyboard_control: true, +enabled_touch_control: true +}, firstimage: true, imageherei: 0, wherediv: 1, @@ -12,6 +20,9 @@ hasnext: false, hasprev: false, opened: false, showimage: function(url,text,gallery,ie) { +if(text==undefined){ +text = ''; +} document.getElementById("imagepopup_fixer").style.display='none'; this.opened = true; var nextimageurl = ''; @@ -20,8 +31,8 @@ var wherediv2 = 2; if(ie==undefined || ie=='' || ie==null){ie=0;} if(this.firstimage){ window.addEventListener("resize",function(){imagepopup.resizeimage();}); -imagepopup.mobiledrag(); -imagepopup.keyboard_view(); +if(imagepopup.option.enabled_touch_control){imagepopup.mobiledrag();} +if(imagepopup.option.enabled_keyboard_control){imagepopup.keyboard_view();} this.firstimage = false; } if(gallery!=undefined){ @@ -62,7 +73,7 @@ setTimeout(function(){ document.getElementById('imagepopup').className = 'active var newImg = new Image; newImg.onerror = function() { document.getElementById('imagepopup_load').className = ''; -imagepopup.showtext('Loading errors','Failed to load the picture :('); +imagepopup.showtext(imagepopup.option.imageloadingerror_title,imagepopup.option.imageloadingerror_text); }; newImg.onload = function() { @@ -72,7 +83,7 @@ newImg.onload = function() { document.getElementById('imagepopup_image'+wherediv1).className = 'active'; document.getElementById('imagepopup_image'+wherediv1).innerHTML = ''; imagepopup.resizeimage(); - document.getElementById('imagepopup_panel').innerHTML = 'Link x'; + document.getElementById('imagepopup_panel').innerHTML = ''+imagepopup.option.open_element+' '+imagepopup.option.close_element+''; document.getElementById('imagepopup_text').innerHTML = text; if(nextimageurl!=''){ var newImg2 = new Image; @@ -129,6 +140,8 @@ document.getElementById('imagepopup').style.display = 'none'; document.getElementById('imagepopup_text').innerHTML = ''; document.getElementById('imagepopup_image1').innerHTML = ''; document.getElementById('imagepopup_image2').innerHTML = ''; +document.getElementById('imagepopup_image1').className = ''; +document.getElementById('imagepopup_image2').className = ''; document.getElementById('imagepopup_prev').className = ''; document.getElementById('imagepopup_next').className = ''; document.getElementById("imagepopup_fixer").style.display='block'; diff --git a/script_min.js b/script_min.js index 0ae9d12..99a00ba 100644 --- a/script_min.js +++ b/script_min.js @@ -1,15 +1,23 @@ -/* ImagepopUp JS, Version: 1.1 | http://intomedia.hu, https://github.com/vmarci21/PhotoPopUp */ -var imagepopup={firstimage:!0,imageherei:0,wherediv:1,gallerye:"",hasnext:!1,hasprev:!1,opened:!1,showimage:function(a,d,c,b){document.getElementById("imagepopup_fixer").style.display="none";this.opened=!0;var f="",e=1,g=2;if(void 0==b||""==b||null==b)b=0;this.firstimage&&(window.addEventListener("resize",function(){imagepopup.resizeimage()}),imagepopup.mobiledrag(),imagepopup.keyboard_view(),this.firstimage=!1);if(void 0!=c)for(this.gallerye=c,c=document.getElementsByClassName(c);bb+1?(document.getElementById("imagepopup_next").className="active",f=void 0!=c[b].dataset.bigsrc?c[b+1].dataset.bigsrc:c[b+1].src,this.hasnext=!0):(this.hasnext=!1,document.getElementById("imagepopup_next").className=""),b=c.length;document.getElementById("imagepopup").style.display= -"block";document.getElementById("imagepopup_load").className="active";setTimeout(function(){document.getElementById("imagepopup").className="active"},30);b=new Image;b.onerror=function(){document.getElementById("imagepopup_load").className="";imagepopup.showtext("Loading errors","Failed to load the picture :(")};b.onload=function(){imagepopup.wherediv=e;document.getElementById("imagepopup_load").className="";document.getElementById("imagepopup_image"+g).className="";document.getElementById("imagepopup_image"+ -e).className="active";document.getElementById("imagepopup_image"+e).innerHTML='';imagepopup.resizeimage();document.getElementById("imagepopup_panel").innerHTML='Link x';document.getElementById("imagepopup_text").innerHTML=d;""!=f&&((new Image).src=f)};b.src=a},showtext:function(a,d){document.getElementById("imagepopup_fixer").style.display="none";document.getElementById("imagepopup").style.display= -"block";document.getElementById("imagepopup_image1").innerHTML='

'+a+"

"+d+"

";document.getElementById("imagepopup_panel").innerHTML='x';setTimeout(function(){document.getElementById("imagepopup").className="active";document.getElementById("imagepopup").className="active";document.getElementById("imagepopup_image1").className="active";document.getElementById("imagepopup_image2").className= -""},30)},next:function(){var a=document.getElementsByClassName(this.gallerye);this.showimage(void 0!=a[this.imageherei+1].dataset.bigsrc?a[this.imageherei+1].dataset.bigsrc:a[this.imageherei+1].src,a[this.imageherei+1].title,this.gallerye,this.imageherei)},prev:function(){var a=document.getElementsByClassName(this.gallerye);this.showimage(void 0!=a[this.imageherei-1].dataset.bigsrc?a[this.imageherei-1].dataset.bigsrc:a[this.imageherei-1].src,a[this.imageherei-1].title,this.gallerye,this.imageherei- -1)},hideimage2:function(a){"imagepopup"!=a.target.id&&"imagepopup_image1"!=a.target.id&&"imagepopup_image2"!=a.target.id||this.hideimage()},hideimage:function(){this.opened=!1;document.getElementById("imagepopup").className="";setTimeout(function(){document.getElementById("imagepopup").style.display="none";document.getElementById("imagepopup_text").innerHTML="";document.getElementById("imagepopup_image1").innerHTML="";document.getElementById("imagepopup_image2").innerHTML="";document.getElementById("imagepopup_prev").className= -"";document.getElementById("imagepopup_next").className="";document.getElementById("imagepopup_fixer").style.display="block"},400)},resizeimage:function(){if(document.getElementById("nagy_kep"+this.wherediv)){var a=document.getElementById("imagepopup").offsetWidth,d=document.getElementById("imagepopup").offsetHeight,d=d-50;document.getElementById("nagy_kep"+this.wherediv).style.maxWidth=a+"px";document.getElementById("nagy_kep"+this.wherediv).style.maxHeight=d+"px";var a=document.getElementById("nagy_kep"+ -this.wherediv).offsetWidth,a=a-20,c=document.getElementById("nagy_kep"+this.wherediv).offsetHeight,d=(d-c)/2;6>d&&(d=4);document.getElementById("nagy_kep"+this.wherediv).style.marginTop=d+"px";600Math.abs(ennyit2)?document.getElementById("nagy_kep"+imagepopup.wherediv).style.marginLeft=ennyit+"px":(b=starttop-ennyit2,document.getElementById("nagy_kep"+imagepopup.wherediv).style.marginTop=b+"px");d.preventDefault()}function c(){var a="0px";Math.abs(ennyit)>Math.abs(ennyit2)?(120ennyit&&imagepopup.hasnext&&(a="-200%"),document.getElementById("nagy_kep"+imagepopup.wherediv).className="touch",document.getElementById("nagy_kep"+ +/* ImagepopUp JS, Version: 1.1.1 | http://intomedia.hu, https://github.com/vmarci21/PhotoPopUp */ +var imagepopup={option:{ +imageloadingerror_title:"Loading errors", +imageloadingerror_text:"Failed to load the picture :(", +close_element:"x", +open_element:"Open", +enabled_keyboard_control:true, +enabled_touch_control:true +},firstimage:!0,imageherei:0,wherediv:1,gallerye:"",hasnext:!1,hasprev:!1,opened:!1,showimage:function(a,c,d,b){void 0==c&&(c="");document.getElementById("imagepopup_fixer").style.display="none";this.opened=!0;var f="",e=1,g=2;if(void 0==b||""==b||null==b)b=0;this.firstimage&&(window.addEventListener("resize", +function(){imagepopup.resizeimage()}),imagepopup.option.enabled_touch_control&&imagepopup.mobiledrag(),imagepopup.option.enabled_keyboard_control&&imagepopup.keyboard_view(),this.firstimage=!1);if(void 0!=d)for(this.gallerye=d,d=document.getElementsByClassName(d);bb+1?(document.getElementById("imagepopup_next").className="active",f=void 0!=d[b].dataset.bigsrc?d[b+1].dataset.bigsrc:d[b+1].src,this.hasnext=!0):(this.hasnext=!1,document.getElementById("imagepopup_next").className=""),b=d.length;document.getElementById("imagepopup").style.display="block";document.getElementById("imagepopup_load").className="active";setTimeout(function(){document.getElementById("imagepopup").className="active"},30);b=new Image;b.onerror=function(){document.getElementById("imagepopup_load").className= +"";imagepopup.showtext(imagepopup.option.imageloadingerror_title,imagepopup.option.imageloadingerror_text)};b.onload=function(){imagepopup.wherediv=e;document.getElementById("imagepopup_load").className="";document.getElementById("imagepopup_image"+g).className="";document.getElementById("imagepopup_image"+e).className="active";document.getElementById("imagepopup_image"+e).innerHTML='';imagepopup.resizeimage();document.getElementById("imagepopup_panel").innerHTML= +''+imagepopup.option.open_element+' '+imagepopup.option.close_element+"";document.getElementById("imagepopup_text").innerHTML=c;""!=f&&((new Image).src=f)};b.src=a},showtext:function(a,c){document.getElementById("imagepopup_fixer").style.display="none";document.getElementById("imagepopup").style.display="block";document.getElementById("imagepopup_image1").innerHTML='

'+ +a+"

"+c+"

";document.getElementById("imagepopup_panel").innerHTML='x';setTimeout(function(){document.getElementById("imagepopup").className="active";document.getElementById("imagepopup").className="active";document.getElementById("imagepopup_image1").className="active";document.getElementById("imagepopup_image2").className=""},30)},next:function(){var a=document.getElementsByClassName(this.gallerye);this.showimage(void 0!= +a[this.imageherei+1].dataset.bigsrc?a[this.imageherei+1].dataset.bigsrc:a[this.imageherei+1].src,a[this.imageherei+1].title,this.gallerye,this.imageherei)},prev:function(){var a=document.getElementsByClassName(this.gallerye);this.showimage(void 0!=a[this.imageherei-1].dataset.bigsrc?a[this.imageherei-1].dataset.bigsrc:a[this.imageherei-1].src,a[this.imageherei-1].title,this.gallerye,this.imageherei-1)},hideimage2:function(a){"imagepopup"!=a.target.id&&"imagepopup_image1"!=a.target.id&&"imagepopup_image2"!= +a.target.id||this.hideimage()},hideimage:function(){this.opened=!1;document.getElementById("imagepopup").className="";setTimeout(function(){document.getElementById("imagepopup").style.display="none";document.getElementById("imagepopup_text").innerHTML="";document.getElementById("imagepopup_image1").innerHTML="";document.getElementById("imagepopup_image2").innerHTML="";document.getElementById("imagepopup_image1").className="";document.getElementById("imagepopup_image2").className="";document.getElementById("imagepopup_prev").className= +"";document.getElementById("imagepopup_next").className="";document.getElementById("imagepopup_fixer").style.display="block"},400)},resizeimage:function(){if(document.getElementById("nagy_kep"+this.wherediv)){var a=document.getElementById("imagepopup").offsetWidth,c=document.getElementById("imagepopup").offsetHeight,c=c-50;document.getElementById("nagy_kep"+this.wherediv).style.maxWidth=a+"px";document.getElementById("nagy_kep"+this.wherediv).style.maxHeight=c+"px";var a=document.getElementById("nagy_kep"+ +this.wherediv).offsetWidth,a=a-20,d=document.getElementById("nagy_kep"+this.wherediv).offsetHeight,c=(c-d)/2;6>c&&(c=4);document.getElementById("nagy_kep"+this.wherediv).style.marginTop=c+"px";600Math.abs(ennyit2)?document.getElementById("nagy_kep"+imagepopup.wherediv).style.marginLeft=ennyit+"px":(b=starttop-ennyit2,document.getElementById("nagy_kep"+imagepopup.wherediv).style.marginTop=b+"px");c.preventDefault()}function d(){var a="0px";Math.abs(ennyit)>Math.abs(ennyit2)?(120ennyit&&imagepopup.hasnext&&(a="-200%"),document.getElementById("nagy_kep"+imagepopup.wherediv).className="touch",document.getElementById("nagy_kep"+ imagepopup.wherediv).style.marginLeft=a,120ennyit&&imagepopup.hasnext&&imagepopup.next()):100ennyit2?imagepopup.hideimage():(a=starttop+"px",document.getElementById("nagy_kep"+imagepopup.wherediv).className="touch",document.getElementById("nagy_kep"+imagepopup.wherediv).style.marginTop=a);setTimeout(function(){document.getElementById("nagy_kep"+imagepopup.wherediv).className=""},200)}ennyit2=starttop=ennyit=starty=startx=0;window.PointerEvent&& -"undefined"==typeof document.documentElement.ontouchstart?navigator.maxTouchPoints&&1