//////////////////////////////////////// // Vanilla JQuery by Paul Caron /////////////////////////////////////// const $ = (query)=>{ if(typeof(query)==="function"){ document.addEventListener("DOMContentLoaded", query); return; }else if(query===window){ this.els=[window]; }else if(typeof(query)==="object"){ this.els=[query]; }else{ this.els=Array.from(document.querySelectorAll(query)); } this.html=(h="")=>{ if(h!=""){this.els.forEach((e)=>e.innerHTML=h);} return this.els.map((e)=>e.innerHTML); }; this.css=(property, value)=>{this.els.forEach((e)=>e.style[property]=value)}; this.on=(e,f)=>{this.els.forEach((elem)=>elem.addEventListener(e,f,true));}; this.off=(e,f)=>{this.els.forEach((elem)=>elem.removeEventListener(e,f,true));} this.attr=(a,value="")=>{ if(value!="") this.els.forEach((e)=>e.setAttribute(a,value)); return this.els.map((e)=>e[a]); } this.hide=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>hiding(e,duration)); }else{ this.els.forEach((e)=>e.style.display="none");} } this.show=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>showing(e,duration)); }else{ this.els.forEach((e)=>e.style.display="");} } this.fadeIn=(duration=600)=>{this.els.forEach((e)=>{fadingIn(e,duration)})} this.fadeOut=(duration=600)=>{this.els.forEach((e)=>{fadingOut(e,duration)})} this.toggle=()=>{this.els.forEach((e)=>{e.style.display=e.style.display=="none"?"":"none"})}; this.slideToggle=(dur=300)=>{ this.els.forEach((e)=>{ if(e.style.display=="none"){ slidingDown(e,dur); }else{ slidingUp(e,dur); } }) }; this.text=()=>{return this.els.map((e)=>e.textContent);} this.val=()=>{return this.els.map((e)=>e.value);} this.append=(h)=>{this.els.forEach((e)=>{e.innerHTML=e.innerHTML+h;})}; this.prepend=(h)=>{this.els.forEach((e)=>{e.innerHTML=h+e.innerHTML;})} this.at=(index)=>{return $(this.els[index]);} return this; } let isAnimating=false; function hiding(el,dur){ if(isAnimating){setTimeout(()=>{hiding(el,dur)},10);return;} isAnimating=true; let count=0; let W=el.width; let H=el.height; let O=el.style.opacity; (function animate(){ el.style.width=W*(20-count)/20+"px"; el.style.height= H*(20-count)/20+"px"; ; el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.height=H+"px"; el.style.width=W+"px"; el.style.opacity="1.0"; isAnimating=false; } })(); } function showing(el,dur){ if(isAnimating){setTimeout(()=>{showing(el,dur)},10);return;} isAnimating=true; let count=0; let S=1.0; el.style.display=""; (function animate(){ el.style.transform=`scale(${S*(count)/20})`; el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingIn(el,dur){ if(isAnimating){setTimeout(()=>{fadeIn(el,dur)},10);return;} isAnimating=true; let count=0; el.style.display=""; (function animate(){ el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingOut(el,dur){ isAnimating=true; let count=0; (function animate(){ el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="0.0"; isAnimating=false; } })(); } function slidingDown(el,dur){ if(isAnimating){setTimeout(()=>{slidingDown(el,dur)},20);return;} isAnimating=true; let count=0; el.style.display=""; let compStyles = window.getComputedStyle(el); let H=parseInt(compStyles["height"]); (function animate(){ el.style.height= H*(count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ isAnimating=false; } })(); } function slidingUp(el,dur){ if(isAnimating){setTimeout(()=>{slidingUp(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); let H=parseInt(compStyles["height"]); (function animate(){ el.style.height= H*(20-count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.height= H+"px"; isAnimating=false; } })(); } function slidingLeft(el,dur){ if(isAnimating){setTimeout(()=>{slidingUp(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); el.style.display=""; let W=parseInt(compStyles["width"]); (function animate(){ el.style.width= W*(20-count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.width= W+"px"; isAnimating=false; } })(); } function slidingRight(el,dur){ if(isAnimating){setTimeout(()=>{slidingUp(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); el.style.display=""; let W=parseInt(compStyles["width"]); (function animate(){ el.style.width= W*(count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.width= W+"px"; isAnimating=false; } })(); } ////////End of JQuery ////////////////////////////// //modal const modal=()=>{ let clickValue=0; let body=document.querySelector("body") let overlay=document.createElement("div"); overlay.setAttribute("id","overlay"); body.appendChild(overlay); overlay.setAttribute("style", "position: fixed; top: 0; left: 0; width:100%; height: 100%; background-color:#000;opacity :0.4; "); let box=document.createElement("div"); box.setAttribute("id","modalbox"); body.appendChild(box); box.setAttribute("style","max-width:60%;position:absolute;background-color:rgba(0,0,0,0.8); border-radius:14px;padding:8px;z-index:1; word-wrap:break-word"); let content=document.createElement("div"); content.setAttribute("id","content"); box.appendChild(content); content.setAttribute("style"," border-radius:8px; background-color:#000; padding:20px; color:orange; "); /* let _cancel=document.createElement("button"); _cancel.setAttribute("id","cancel"); box.appendChild(_cancel); _cancel.appendChild(document.createTextNode("No")); _cancel.setAttribute("style"," background-color:black;outline-style:none;border-radius:10%;border-color:#999;color:white;padding:1em;"); _cancel.addEventListener("click",()=>{clickValue="no"}); /* let _warn=document.createElement("button"); _warn.setAttribute("id","warn"); box.appendChild(_warn); _warn.appendChild(document.createTextNode("Warn")); _warn.setAttribute("style"," background-color:yellow;outline-style:none;border-radius:10%;border-color:#999;color:black;padding:1em;"); _warn.addEventListener("click",()=>{clickValue="warn"});*/ let _okay=document.createElement("button"); _okay.setAttribute("id","okay"); box.appendChild(_okay); _okay.appendChild(document.createTextNode("👌")); _okay.setAttribute("style"," background-color:green;outline-style:none;border-radius:10%;border-color:#999;color:black;padding:0.5em 1em 0.5em 1em;margin-top:8px"); _okay.addEventListener("click",()=>{clickValue="yes";}); let W=window.innerWidth; let H=window.innerHeight; let bh=box.offsetHeight; let bw=box.offsetWidth; this.center=()=>{ $(box).css("top",0.5*H-bh*0.5+"px"); $(box).css("left",0.5*W-bw*0.5+"px"); } center(); $(window).on("resize",()=>{ W=window.innerWidth; H=window.innerHeight; center();}); this.open=()=>{ overlay.style.display=""; box.style.display=""; $(box).show(300); } this.close=()=>{ overlay.style.display="none"; box.style.display="none"; } this.text=(t)=>{ n=document.createTextNode(t); content.appendChild(n); box.style.display=""; bh=box.offsetHeight; bw=box.offsetWidth; box.style.display="none"; center(); } this.prompt=async(callback=()=>{})=>{ this.open(); while(clickValue==0){ let c= await check(); } function check(){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(clickValue); },500); }); }; callback(clickValue ); clickValue=0; close(); } close(); return {text:this.text,prompt:this.prompt}; } ////////// let m; function start(){ $("#slidercontainer").hide(); //init modal when DOM ready m=modal(); m.text("Welcome! Here are examples of medium format film photography. The square shape of those pictures is different than what we are acustomed to, isnt it? I personnaly think there is a place for square medium format in web design. Swipe left or right."); m.prompt(()=>{ $("#slidercontainer").show(600); }); window.addEventListener("touchstart", startHandler,false); window.addEventListener("touchmove",moveHandler,false); window.addEventListener("touchend",endHandler,false); } $(start); /////// let x1,x2; function startHandler(e){ x1=e.touches[0].pageX; } function moveHandler(e){ x2=e.touches[0].pageX; } function endHandler(e){ if(x2>x1+40){ previous(); }else if(x1>x2+40){ next(); } } let imgIndex=0; let sliderLength=7; function previous(){ if(isAnimating) return; $(".ballactive").els[0].classList.remove("ballactive") if(--imgIndex<0){ imgIndex=0; } else{ moveRight($("#slider").els[0],400); } $(".ball").els[imgIndex].classList.add("ballactive") } function next(){ if(isAnimating) return; $(".ballactive").els[0].classList.remove("ballactive") if(++imgIndex>sliderLength-1){ imgIndex=sliderLength-1; } else{ moveLeft($("#slider").els[0],400); } $(".ball").els[imgIndex].classList.add("ballactive") } function moveRight(el, dur){ if(isAnimating){setTimeout(()=>{moveRight(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); el.style.display=""; let W=parseInt(compStyles["width"]); let t=parseInt(compStyles["transform"].split(",")[4]) || 0; (function animate(){ el.style.transform= "translate("+(t+W*(count)/10)+"px,0)"; ; count++; if(count<=10){ setTimeout(animate,dur/10); }else{ // el.style.width= W+"px"; isAnimating=false; } })(); } function moveLeft(el, dur){ if(isAnimating){setTimeout(()=>{moveLeft(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); el.style.display=""; let W=parseInt(compStyles["width"]); let t=parseInt(compStyles["transform"].split(",")[4]) || 0; (function animate(){ el.style.transform= "translate("+(t+W*(-count)/10)+"px,0)"; ; count++; if(count<=10){ setTimeout(animate,dur/10); }else{ isAnimating=false; } })(); }

Slider Slideshow - medium format