diff --git a/script.js b/script.js index 709d71c..51db2d3 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,5 @@ /*ImagepopUp JS -Version: 1.0 +Version: 1.1 http://intomedia.hu https://github.com/vmarci21/PhotoPopUp */ @@ -72,7 +72,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 = 'Link x'; document.getElementById('imagepopup_text').innerHTML = text; if(nextimageurl!=''){ var newImg2 = new Image; @@ -86,7 +86,7 @@ showtext: function(title,text){ document.getElementById("imagepopup_fixer").style.display='none'; document.getElementById('imagepopup').style.display = 'block'; document.getElementById('imagepopup_image1').innerHTML = '

'+title+'

'+text+'

'; -document.getElementById('imagepopup_panel').innerHTML = 'x'; +document.getElementById('imagepopup_panel').innerHTML = 'x'; setTimeout(function(){ document.getElementById('imagepopup').className = 'active'; document.getElementById('imagepopup').className = 'active'; document.getElementById('imagepopup_image1').className = 'active'; @@ -124,12 +124,15 @@ this.hideimage(); hideimage: function(){ this.opened = false; document.getElementById('imagepopup').className = ''; -setTimeout(function(){ document.getElementById('imagepopup').style.display = 'none'; +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 = ''; -}, 300); document.getElementById("imagepopup_fixer").style.display='block'; +}, 400); }, resizeimage: function() { @@ -180,17 +183,47 @@ starty = 0; ennyit = 0; starttop = 0; ennyit2 = 0; -document.getElementById('imagepopup').addEventListener('touchstart', function(event) { +if (window.PointerEvent && !("undefined" != typeof document.documentElement.ontouchstart)) { +if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { + window.addEventListener('pointerdown', function(event) { + touchstarted(event.clientX, event.clientY); + }, false); + window.addEventListener('pointermove', function(event) { + touchmoved(event.clientX, event.clientY,event); + }, false); + window.addEventListener('pointerup', function(event) { + touchended(); + }, false); +} + +}else{ + document.getElementById('imagepopup').addEventListener('touchstart', function(event) { + var touch = event.targetTouches[0]; + touchstarted(touch.pageX,touch.pageY); + }, false); + document.getElementById('imagepopup').addEventListener('touchmove', function(event) { var touch = event.targetTouches[0]; - startx = touch.pageX; - starty= touch.pageY; + touchmoved(touch.pageX,touch.pageY,event); + }, false); + document.getElementById('imagepopup').addEventListener('touchend', function(event) { + var touch = event.targetTouches[0]; + touchended(); + }, false); + +} + +function touchstarted(x,y){ + startx = x; + starty= y; + ennyit = 0; + ennyit2 = 0; starttop = document.getElementById('nagy_kep'+imagepopup.wherediv).style.marginTop; starttop = starttop.replace('px',''); - }, false); - document.getElementById('imagepopup').addEventListener('touchmove', function(event) { - var touch = event.targetTouches[0]; - ennyit = touch.pageX-startx; - ennyit2 = starty-touch.pageY; +} + + function touchmoved(x,y,event){ + ennyit = x-startx; + ennyit2 = starty-y; if(Math.abs(ennyit)>Math.abs(ennyit2)){ document.getElementById('nagy_kep'+imagepopup.wherediv).style.marginLeft = ennyit+ 'px'; }else{ @@ -198,20 +231,21 @@ document.getElementById('imagepopup').addEventListener('touchstart', function(ev document.getElementById('nagy_kep'+imagepopup.wherediv).style.marginTop = ennyit3+ 'px'; } event.preventDefault(); - }, false); - document.getElementById('imagepopup').addEventListener('touchend', function(event) { + } + + function touchended(){ var hova = '0px'; if(Math.abs(ennyit)>Math.abs(ennyit2)){ - if(ennyit>200 && imagepopup.hasprev){ + if(ennyit>120 && imagepopup.hasprev){ var hova = '100%'; - }else if(ennyit<-200 && imagepopup.hasnext){ + }else if(ennyit<-120 && imagepopup.hasnext){ var hova = '-200%'; } document.getElementById('nagy_kep'+imagepopup.wherediv).className = 'touch'; document.getElementById('nagy_kep'+imagepopup.wherediv).style.marginLeft = hova; - if(ennyit>200 && imagepopup.hasprev){ + if(ennyit>120 && imagepopup.hasprev){ imagepopup.prev(); - }else if(ennyit<-200 && imagepopup.hasnext){ + }else if(ennyit<-120 && imagepopup.hasnext){ imagepopup.next(); } }else{ @@ -219,11 +253,12 @@ document.getElementById('imagepopup').addEventListener('touchstart', function(ev imagepopup.hideimage(); }else{ hova = starttop+'px'; - } document.getElementById('nagy_kep'+imagepopup.wherediv).className = 'touch'; document.getElementById('nagy_kep'+imagepopup.wherediv).style.marginTop = hova; + } + } + setTimeout(function(){document.getElementById('nagy_kep'+imagepopup.wherediv).className = '';}, 200); } - }, false); }, hideview: function(idname) { diff --git a/script_min.js b/script_min.js index 967f56a..0ae9d12 100644 --- a/script_min.js +++ b/script_min.js @@ -1,13 +1,15 @@ -/* ImagepopUp JS, Version: 1.0 | 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,b,d,c){document.getElementById("imagepopup_fixer").style.display='none';this.opened=!0;var f="",e=1,g=2;if(void 0==c||""==c||null==c)c=0;this.firstimage&&(window.addEventListener("resize",function(){imagepopup.resizeimage()}),imagepopup.mobiledrag(),imagepopup.keyboard_view(),this.firstimage=!1);if(void 0!=d)for(this.gallerye=d,d=document.getElementsByClassName(d);cc+1?(document.getElementById("imagepopup_next").className="active",f=void 0!=d[c].dataset.bigsrc?d[c+1].dataset.bigsrc:d[c+1].src,this.hasnext=!0):(this.hasnext=!1,document.getElementById("imagepopup_next").className=""),c=d.length;document.getElementById("imagepopup").style.display="block";document.getElementById("imagepopup_load").className= -"active";setTimeout(function(){document.getElementById("imagepopup").className="active"},30);c=new Image;c.onerror=function(){document.getElementById("imagepopup_load").className="";imagepopup.showtext("Loading errors","Failed to load the picture :(")};c.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=' x';document.getElementById("imagepopup_text").innerHTML=b;""!=f&&((new Image).src=f)};c.src=a},showtext:function(a,b){document.getElementById("imagepopup_fixer").style.display='none';document.getElementById("imagepopup").style.display="block";document.getElementById("imagepopup_image1").innerHTML='

'+ -a+"

"+b+"

";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_fixer").style.display='block';document.getElementById("imagepopup").className="";setTimeout(function(){document.getElementById("imagepopup").style.display="none";document.getElementById("imagepopup_text").innerHTML="";document.getElementById("imagepopup_prev").className="";document.getElementById("imagepopup_next").className=""},300)},resizeimage:function(){if(document.getElementById("nagy_kep"+this.wherediv)){var a=document.getElementById("imagepopup").offsetWidth, -b=document.getElementById("imagepopup").offsetHeight,b=b-50;document.getElementById("nagy_kep"+this.wherediv).style.maxWidth=a+"px";document.getElementById("nagy_kep"+this.wherediv).style.maxHeight=b+"px";var a=document.getElementById("nagy_kep"+this.wherediv).offsetWidth,a=a-20,d=document.getElementById("nagy_kep"+this.wherediv).offsetHeight,b=(b-d)/2;6>b&&(b=4);document.getElementById("nagy_kep"+this.wherediv).style.marginTop=b+"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");a.preventDefault()},!1);document.getElementById("imagepopup").addEventListener("touchend",function(a){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)},!1)},hideview:function(a){a=document.getElementById(a);a.style.opacity="1"==a.style.opacity?"0":"1"}}; +/* 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.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