Jump to content
Sign in to follow this  
lucasramos999

Imagem no código script não aparece

Recommended Posts

Bom dia. Eu quero usar o mesmo efeito de distorção e noise que este site utiliza: https://www.vinylcuts.nyc/issue-03/issue-03-cover/. Percebam que as imagens sofrem distorções programadas, além de um ruído que lembra antigas TVs. É esse mesmo efeito que quero usar, mas quando aplico o endereço das imagens no código, elas não aparecem.



Este é o código do site onde as imagens são inseridas. É através desse comando que elas sofrem as distorções e ruídos.



var pageData = [{"title":"issue-03-cover","pageType":"standard","bkgndImgPath":"https://assets.vinylcuts.nyc/wp-content/uploads/2016/02/issue03_0000_cover_img00.jpg"}];


Este é o código principal responsável pelos efeitos: https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/vinyl-webgl.js?ver=1.05.11 .



O problema é que quando vou inserir as imagens, elas não aparecem. O único comando que parece funcionar é:



var pageData = [{"title":"splash","pageType":"splash"}];


Este comando acima está presente na página inicial. Ele é responsável pelos efeitos de listras em 3D. Vejam: https://www.vinylcuts.nyc/show/splash/ . Mas as imagens da logo,background e título que estão inseridas no código, também não aparecem. Qual será o problema? O que tem de errado? Por que não consigo carregar as imagens e ter esse efeito?



Abaixo são as bibliotecas principais utilizadas:


Capturar.PNG.eb3a4aa4ad59ce788a4d4ea20a4




O plugin que ele utilizou foi baseado em Three.js. Veja: https://github.com/felixturner/bad-tv-shader. Ele utilizou bibliotecas desse plugin e adaptou com novos efeitos através daquele código principal que eu enviei. Eu sei quais são as bibliotecas principais e tal, mas quando vou fazer os testes, as imagens não carregam. O código parece perfeito, mas não tenho ideia do que está gerando esse erro.




Este é um código bem resumido pra facilitar o entendimento. Perceba que no fundo só aparece um background escuro com as listras se movimentando em 3D e tem aquela leve distorção. No site original, primeiro aparece esse fundo e depois as imagens são carregadas. Tem um efeito "opacity" também. O que eu quero disso tudo é só conseguir carregar as imagens nesse código. Quem puder me ajudar eu agradeço muito.



<!doctype html>
<!-- dev test ! -->
<html lang="en-US" class="no-js" style="background-color:#000;">
<head>
<meta charset="UTF-8">



<!-- LIB -->
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/stats.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/TweenMax.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/ImprovedNoise.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/jquery.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/SimplexNoise.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/atutil.js"></script>

<!-- THREE -->
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/three.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/EffectComposer.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/RenderPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/ShaderPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/MaskPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/CopyShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/FilmShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/RGBShiftShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/VignetteShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/BrightnessContrastShader.js"></script>

<link rel='stylesheet' id='hbo_vinyl-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/style.css?ver=1.0' media='all' />
<link rel='stylesheet' id='fontAwesome-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/font-awesome.min.css?ver=1.0' media='all' />
<link rel='stylesheet' id='svg-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/svg.css?ver=1.0' media='all' />
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

<link rel="alternate" type="application/json+oembed" href="https://www.vinylcuts.nyc/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.vinylcuts.nyc%2Fshow%2Fsplash%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://www.vinylcuts.nyc/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.vinylcuts.nyc%2Fshow%2Fsplash%2F&format=xml" />



<style type="text/css">
body {
background:url(http://wallpaper.ultradownloads.com.br/277228_Papel-de-Parede-Belissima-Paisagem-de-Montanhas_1920x1200.jpg);
z-index:6000;
}

#webgl {



}
</style>

<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: 'https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl',
tests: {}
});
</script>



<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/app-loader.js?ver=1.05.11'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/site.min.js?ver=1.05.11'></script>

</head>
<!-- BEGIN Krux Control Tag for "Vinyl Microsite" --> <!-- Source: /snippet/controltag?confid=KNhYNCzS&site=Vinyl%20Microsite&edit=1 --> <script class="kxct" data-id="KNhYNCzS" data-timing="async" data-version="1.9" type="text/javascript"> window.Krux||((Krux=function(){Krux.q.push(arguments)}).q=[]); (function(){ var k=document.createElement('script');k.type='text/javascript';k.async=true; var m,src=(m=location.href.match(/\bkxsrc=([^&]+)/))&&decodeURIComponent(m[1]); k.src = /^https?:\/\/([a-z0-9_\-\.]+\.)?krxd\.net(:\d{1,5})?\//i.test(src) ? src : src === "disable" ? "" : (location.protocol==="https:"?"https:":"http:")+"//cdn.krxd.net/controltag?confid=KNhYNCzS" ; var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(k,s); }()); </script> <!-- END Krux Controltag -->

<!--
Start of DoubleClick Floodlight Tag: Please do not remove
Activity name of this tag: Vinyl
URL of the webpage where the tag is expected to be placed: http://www.vinylcuts.nyc
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 12/10/2015
-->

<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://1234407.fls.doubleclick.net/activityi;src=1234407;type=hbogen;cat=vinyl0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://1234407.fls.doubleclick.net/activityi;src=1234407;type=hbogen;cat=vinyl0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
<script>


THREE.BadTVShader={uniforms:{tDiffuse:{type:"t",value:null},time:{type:"f",value:0},distortion:{type:"f",value:3},distortion2:{type:"f",value:5},speed:{type:"f",value:.1},rollAmt:{type:"f",value:0}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform float time;","uniform float distortion;","uniform float distortion2;","uniform float speed;","uniform float rollAmt;","varying vec2 vUv;","vec3 mod289(vec3 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec2 mod289(vec2 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec3 permute(vec3 x) {"," return mod289(((x*34.0)+1.0)*x);","}","float snoise(vec2 v)"," {"," const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0"," 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)"," -0.577350269189626, // -1.0 + 2.0 * C.x"," 0.024390243902439); // 1.0 / 41.0"," vec2 i = floor(v + dot(v, C.yy) );"," vec2 x0 = v - i + dot(i, C.xx);"," vec2 i1;"," i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);"," vec4 x12 = x0.xyxy + C.xxzz;"," x12.xy -= i1;"," i = mod289(i); // Avoid truncation effects in permutation"," vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))"," + i.x + vec3(0.0, i1.x, 1.0 ));"," vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);"," m = m*m ;"," m = m*m ;"," vec3 x = 2.0 * fract(p * C.www) - 1.0;"," vec3 h = abs(x) - 0.5;"," vec3 ox = floor(x + 0.5);"," vec3 a0 = x - ox;"," m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );"," vec3 g;"," g.x = a0.x * x0.x + h.x * x0.y;"," g.yz = a0.yz * x12.xz + h.yz * x12.yw;"," return 130.0 * dot(m, g);","}","void main() {","vec2 p = vUv;","float ty = time*speed;","float yt = p.y - ty;","float offset = snoise(vec2(yt*3.0,0.0))*0.2;","offset = offset*distortion * offset*distortion * offset;","offset += snoise(vec2(yt*50.0,0.0))*distortion2*0.001;","gl_FragColor = texture2D(tDiffuse, vec2(fract(p.x + offset),fract(p.y-rollAmt) ));","}"].join("\n")};var GalleryPage=function(){var a,b,c,d,e,f=this;this.init=function(g){f.data=g,f.holder=new THREE.Object3D;var h=new THREE.TextureLoader;h.crossOrigin="";var i=new THREE.Texture;i=h.load(g.bkgndImgPath),i.minFilter=THREE.LinearFilter,i.maxFilter=THREE.LinearFilter,d=new THREE.MeshBasicMaterial({map:i,transparent:!0,opacity:0});var j=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W/2,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(j,d),f.holder.add(a);var k=new THREE.Texture;k=h.load(g.textImgPath),k.minFilter=THREE.LinearFilter,k.maxFilter=THREE.LinearFilter,e=new THREE.MeshBasicMaterial({map:k,transparent:!0,opacity:0});var l=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W/2,VinylBkgndConfig.BKGND_H,1,1);b=new THREE.Mesh(l,e),f.holder.add(b),b.position.z=-1,"right"===g.textSide?(a.position.x=-VinylBkgndConfig.BKGND_W/4,b.position.x=VinylBkgndConfig.BKGND_W/4):(a.position.x=VinylBkgndConfig.BKGND_W/4,b.position.x=-VinylBkgndConfig.BKGND_W/4),c=b.position.x},this.show=function(){TweenMax.to(d,.5,{opacity:1,delay:.5}),TweenMax.to(e,.5,{opacity:1,delay:.5}),b.visible=!1;var a=1;TweenMax.delayedCall(a,function(){b.visible=!0}),TweenMax.fromTo(b.position,.7,{x:-VinylBkgndConfig.BKGND_H/2+c,y:-VinylBkgndConfig.BKGND_H/2},{x:c,y:0,ease:Power2.easeOut,delay:a})},this.hide=function(){TweenMax.to(d,.5,{opacity:0}),TweenMax.to(e,.5,{opacity:0})},this.update=function(){}},Page=function(){var a,b,c=this;this.init=function(d){c.data=d,c.holder=new THREE.Object3D;var e=new THREE.TextureLoader;e.crossOrigin="";var f=new THREE.Texture;f=e.load(d.bkgndImgPath,function(){c.imageLoadCallback&&c.imageLoadCallback()}),f=e.load(d.bkgndImgPath),f.minFilter=THREE.LinearFilter,f.maxFilter=THREE.LinearFilter,b=new THREE.MeshBasicMaterial({map:f,transparent:!0,opacity:0});var g=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(g,b),c.holder.add(a)},this.show=function(){TweenMax.to(b,.5,{opacity:1,delay:.5})},this.hide=function(){TweenMax.to(b,.5,{opacity:0})},this.update=function(){}},RainbowPage=function(){var a=this,b=[539184,1850635,3160610,1648689,2106168,3612728,3349542,3089937,3221772,1784842,539184],c=[],d=[];this.init=function(e){a.data=e,a.holder=new THREE.Object3D,a.holder.visible=!1;var f=VinylBkgndConfig.BKGND_W/b.length,g=new THREE.PlaneGeometry(f,3*VinylBkgndConfig.BKGND_H,1,1),h=new THREE.Object3D;a.holder.add(h),h.rotation.x=.55,h.position.z=-200;var i=1.5;h.scale.set(i,i,i),$.each(b,function(a,b){var d=new THREE.MeshBasicMaterial({color:b}),e=new THREE.Mesh(g,d);h.add(e),c.push(e),e.position.x=-VinylBkgndConfig.BKGND_W/2+f/2+f*a});var j=new THREE.TextureLoader;j.crossOrigin="Anonymous";for(var k=1;4>k;k++){var l=new THREE.Texture;l=j.load(e["textImgPath"+k]),l.minFilter=THREE.LinearFilter,l.maxFilter=THREE.LinearFilter;var m=new THREE.MeshBasicMaterial({map:l,transparent:!0}),n=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1),o=new THREE.Mesh(n,m);a.holder.add(o),o.position.z=k,d.push(o)}},this.show=function(){var b=.6;TweenMax.delayedCall(b,function(){a.holder.visible=!0}),$.each(c,function(a,c){var d=b+.1*a;TweenMax.killTweensOf(c.position),c.position.y=3*-VinylBkgndConfig.BKGND_H,TweenMax.to(c.position,2,{y:0,ease:Power2.easeOut,delay:d})}),$.each(d,function(a,b){b.material.opacity=1});var e=VinylBkgndConfig.BKGND_H;TweenMax.fromTo(d[0].position,.7,{x:e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:2}),TweenMax.fromTo(d[1].position,.7,{x:-e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:2.5}),TweenMax.fromTo(d[2].position,.7,{x:e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:3}),setTimeout(function(){$("#webgl").on("click",a.onClick),$("#webgl").css("cursor","pointer"),$("#playlist div.page-inner").css("cursor","pointer")},3e3)},this.onClick=function(){$.each(d,function(a,b){TweenMax.to(b.material,.3,{opacity:0})}),$("#webgl").off("click",a.onClick),$("#webgl").css("cursor","default"),console.log("done")},this.hide=function(){a.holder.visible=!1,$("#webgl").off("click",a.onClick),$("#webgl").css("cursor","default")},this.update=function(){}},SplashPage=function(){var a,b,c,d,e,f,g,h,i,j,k,l=this,m=0,n=1e3,o=1e3,p=new THREE.Geometry,q=.0015,r=0,s=1.1,t=[],u=30,v=50,w=new THREE.Geometry;this.init=function(m){l.data=m,l.holder=new THREE.Object3D;var q=new THREE.TextureLoader;q.crossOrigin="Anonymous";var r=new THREE.Texture;r=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/bkgnd.jpg"),r.minFilter=THREE.LinearFilter,r.maxFilter=THREE.LinearFilter,c=new THREE.MeshBasicMaterial({map:r,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var s=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(s,c),l.holder.add(a);var x=new THREE.Texture;x=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/logo.jpg",function(){l.imageLoadCallback&&l.imageLoadCallback()}),x.minFilter=THREE.LinearFilter,x.maxFilter=THREE.LinearFilter,d=new THREE.MeshBasicMaterial({map:x,transparent:!0,blending:THREE.AdditiveBlending});var y=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);b=new THREE.Mesh(y,d),l.holder.add(b),b.position.z=1,b.position.y=-VinylBkgndConfig.BKGND_H;var z=new THREE.Texture;z=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/sub01.png"),z.minFilter=THREE.LinearFilter,z.maxFilter=THREE.LinearFilter,e=new THREE.MeshBasicMaterial({map:z,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var A=new THREE.PlaneGeometry(586,26,1,1),B=new THREE.Mesh(A,e);l.holder.add(B),B.position.z=1,B.position.y=150;var C=new THREE.Texture;C=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/sub02.png"),C.minFilter=THREE.LinearFilter,C.maxFilter=THREE.LinearFilter,f=new THREE.MeshBasicMaterial({map:C,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var D=new THREE.PlaneGeometry(214,26,1,1),E=new THREE.Mesh(D,f);l.holder.add(E),E.position.z=1,E.position.y=-150,h=new THREE.Group,l.holder.add(h),h.position.z=-500;var F=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/particle.png");i=new THREE.PointsMaterial({map:F,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0,size:10,opacity:0});for(var G,H=0;n>H;H++)G=ATUtil.randomVector3(o),G.initPos=Math.random(),p.vertices.push(G);g=new THREE.Points(p,i),g.sortParticles=!1,l.holder.add(g),h.add(g);var I=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/dot.png");j=new THREE.PointsMaterial({size:300,vertexColors:!0,opacity:0,map:I,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0});for(var J=[],H=0;v>H;H++)G=ATUtil.randomVector3(o),G.initPos=Math.random(),G.theta=Math.random()*Math.PI*2,G.phi=Math.random()*Math.PI*2,w.vertices.push(G),J[H]=new THREE.Color,J[H].setHSL(Math.random(),.8,.5);w.colors=J,k=new THREE.Points(w,j),k.sortParticles=!1,h.add(k);var K=new THREE.PlaneGeometry(5e3,40,1,1);for(H=0;u>H;++H){var L=new THREE.MeshBasicMaterial({opacity:.04,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0});L.color=new THREE.Color,L.color.setHSL(Math.random(),1,.5);var M=new THREE.Mesh(K,L);M.doubleSided=!0,M.rotation.x=Math.random()*Math.PI,M.rotation.y=Math.random()*Math.PI,M.rotation.z=Math.random()*Math.PI,h.add(M),t.push(M)}},this.show=function(){TweenMax.to(c,1,{opacity:1,delay:.5}),TweenMax.to(d,1,{opacity:1,delay:.5}),TweenMax.fromTo(b.position,1,{x:-VinylBkgndConfig.BKGND_W/2,y:-VinylBkgndConfig.BKGND_H},{x:0,y:0,ease:Power3.easeOut,delay:1}),TweenMax.to(i,2,{opacity:.8,delay:1});for(var a=0;u>a;++a)TweenMax.fromTo(t[a].material,1,{opacity:0},{opacity:.04,delay:2});TweenMax.to(e,.5,{opacity:1,delay:2.5}),TweenMax.to(f,.5,{opacity:1,delay:3}),TweenMax.to(j,1,{opacity:.04,delay:2.5})},this.hide=function(){TweenMax.to(c,.5,{opacity:0}),TweenMax.to(d,.5,{opacity:0}),TweenMax.to(i,.5,{opacity:0}),TweenMax.to(e,.5,{opacity:0}),TweenMax.to(f,.5,{opacity:0}),TweenMax.to(j,.5,{opacity:0});for(var a=0;u>a;++a)TweenMax.to(t[a].material,.5,{opacity:0});$("#webgl").off("click",l.hide),$("#webgl").css("cursor","default")},this.update=function(){var a=.004;r+=q,h.rotation.y+=a,h.rotation.z+=a/2,m+=s}},VinylBkgndConfig={BKGND_W:1440,BKGND_H:900,HALF_FRAME_RATE:!0},noise=new ImprovedNoise,VinylWebGL=function(){function a(){TweenLite.defaultOverwrite="all",t=window.location.href.indexOf("devmode")>-1,i=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1e4),i.position.z=1e3,j=new THREE.Scene,j.fog=new THREE.Fog(0,0,2e3),n=new THREE.Object3D,n.position.z=415,j.add(n),k=new THREE.WebGLRenderer,k.setPixelRatio(window.devicePixelRatio),k.setSize(window.innerWidth,window.innerHeight),$("#webgl").append(k.domElement),l=new Stats,l.domElement.style.position="absolute",l.domElement.style.top="0px",l.domElement.style.right="0px",t&&$("#webgl").append(l.domElement),d(),$(window).resize(f),f(),b(pageData)}function b(a){$.each(a,function(a,b){var c;"none"===b.pageType?q.push(null):("standard"===b.pageType?c=new Page:"gallery"===b.pageType?c=new GalleryPage:"rainbow"===b.pageType?c=new RainbowPage:"splash"===b.pageType&&(c=new SplashPage),c.init(b),n.add(c.holder),q.push(c))}),TweenMax.fromTo(o.bcPass.uniforms.brightness,1,{value:-1},{value:0}),e(),q[q.length-1].imageLoadCallback=function(){console.log("loaded!"),$("div#loader-curtain").hide()}}function c(a){q[r]&&q[r].hide(),q[a]&&q[a].show(),r=a}function d(){o.renderPass=new THREE.RenderPass(j,i),o.badTVPass=new THREE.ShaderPass(THREE.BadTVShader),o.rgbPass=new THREE.ShaderPass(THREE.RGBShiftShader),o.filmPass=new THREE.ShaderPass(THREE.FilmShader),o.bcPass=new THREE.ShaderPass(THREE.BrightnessContrastShader),m=new THREE.EffectComposer(k),m.addPass(o.renderPass),m.addPass(o.badTVPass),m.addPass(o.rgbPass),m.addPass(o.filmPass),m.addPass(o.bcPass),o.bcPass.renderToScreen=!0,o.badTVPass.uniforms.distortion.value=10.3,o.badTVPass.uniforms.distortion2.value=10.1,o.badTVPass.uniforms.speed.value=1.5,o.rgbPass.uniforms.angle.value=0,o.rgbPass.uniforms.amount.value=.002,o.filmPass.uniforms.sIntensity.value=.4,o.filmPass.uniforms.nIntensity.value=.6,o.filmPass.uniforms.grayscale.value=0}function e(){if(requestAnimationFrame(e),v=!v,(!VinylBkgndConfig.HALF_FRAME_RATE||!v)&&u){l.update(),m.render(.1),p+=.01,o.badTVPass.uniforms.time.value=p,o.filmPass.uniforms.time.value=p;var a=noise.noise(p,0,0);o.rgbPass.uniforms.angle.value=2*Math.PI*a,a=15*Math.pow(a,3),o.badTVPass.uniforms.distortion.value=a,o.badTVPass.uniforms.distortion2.value=a,q[0].update()}}function f(){var a=window.innerWidth,b=window.innerHeight;i.aspect=a/b,i.updateProjectionMatrix(),k.setSize(a,b),m.setSize(a,b);var c;c=i.aspect<s?1:i.aspect/s,n.scale.set(c,c,c),o.filmPass.uniforms.sCount.value=1.5*window.innerHeight}function g(){$("#webgl").css("display","block"),u=!0}function h(){$("#webgl").css("display","none"),u=!1}var i,j,k,l,m,n,o={},p=0,q=[],r=-1,s=VinylBkgndConfig.BKGND_W/VinylBkgndConfig.BKGND_H,t=!1,u=!0,v=!0;return{init:a,showPage:c,show:g,hide:h}}();


</script>

<body class="page page-id-1048 page-child parent-pageid-1044 page-template page-template-template-episode-splash page-template-template-episode-splash-php splash" data-color="#ffffff" data-issue="Vinyl " id="vinyl-cuts" style="background-color:#000;">



<script type="text/javascript" src="https://www.hbo.com/html/js/s_code_onsite.js"></script>
<script type="text/javascript" src="https://www.hbo.com/html/js/offsite-tracklinks.js"></script>

<!-- analytics -->
<script type="text/javascript">
var body = document.getElementsByTagName('body')[0];
var device = new MobileDetect(window.navigator.userAgent);
var omniture = null;
var deviceType = 'desktop';
deviceType = ( device.is('iPad') ) ? 'ipad' : deviceType;
deviceType = ( device.is('iPhone') ) ? 'iphone' : deviceType;
deviceType = ( device.is('AndroidOS') ) ? 'android' : deviceType;
deviceType = ( device.is('Kindle') ) ? 'kindle' : deviceType;
var deviceMob = ( device.match('iphone|ipad|android|kindle') ) ? 'yes' : 'no';

var config = {
eVar10: 'Vinyl',
prop10: 'Vinyl',
eVar30: deviceMob,
prop30: deviceMob,
eVar30: deviceType,
prop30: deviceType,
eVar50: body.dataset.issue,
prop50: body.dataset.issue,
pageName: null,
eVar1: null,
hier1: null

};

var omnitureSettings = config;

</script>

<!-- analytics -->


<div id="webgl"></div>

<script type="text/javascript">

var pageData = [{"title":"splash","pageType":"splash"}];

</script>

<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By alysson122010
      Galera estou com um sistema de jcrop que quando eu coloco imagem jpg e jpeg ele funciona de boa porem quando coloco png a imagem fica toda preta e salva preta.
       
      PHP que salva
       

      <?php
      /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           $post = isset($_POST) ? $_POST: array();
           //print_R($post);die;
           switch($post['action']) {
            case 'save' :
              saveAvatarTmp();
            break;
            default:
              changeAvatar();
              
           }
          
           function changeAvatar() {
              $post = isset($_POST) ? $_POST: array();
              $max_width = "500"; 
              $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
              $path = 'images/tmp';
              $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
              $name = $_FILES['photoimg']['name'];
              $size = $_FILES['photoimg']['size'];
              if(strlen($name))
              {
              list($txt, $ext) = explode(".", $name);
              if(in_array($ext,$valid_formats))
              {
              if($size<(1024*1024)) // Image size max 1 MB
              {
              $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
              $filePath = $path .'/'.$actual_image_name;
              $tmp = $_FILES['photoimg']['tmp_name'];
              
              if(move_uploaded_file($tmp, $filePath))
              {
              $width = getWidth($filePath);
                  $height = getHeight($filePath);
                  //Scale the image if it is greater than the width set above
                  if ($width > $max_width){
                      $scale = $max_width/$width;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }else{
                      $scale = 1;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }
              /*$res = saveAvatar(array(
                              'userId' => isset($userId) ? intval($userId) : 0,
                                                      'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                              ));*/
                              
              //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
              echo "<img id='photo' file-name='".$actual_image_name."' class='' src='".$filePath.'?'.time()."' class='preview'/>";
              }
              else
              echo "failed";
              }
              else
              echo "Image file size max 1 MB"; 
              }
              else
              echo "Invalid file format.."; 
              }
              else
              echo "Please select image..!";
              exit;
              
              
          }
          /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           function saveAvatarTmp() {
              $post = isset($_POST) ? $_POST: array();
              $userId = isset($post['id']) ? intval($post['id']) : 0;
              $path ='\\images\uploads\tmp';
              $t_width = 300; // Maximum thumbnail width
              $t_height = 300;    // Maximum thumbnail height
              
          if(isset($_POST['t']) and $_POST['t'] == "ajax")
          {
              extract($_POST);
              
              //$img = get_user_meta($userId, 'user_avatar', true);
              $imagePath = 'images/tmp/'.$_POST['image_name'];
              $ratio = ($t_width/$w1); 
              $nw = ceil($w1 * $ratio);
              $nh = ceil($h1 * $ratio);
              $nimg = imagecreatetruecolor($nw,$nh);
              $im_src = imagecreatefromjpeg($imagePath);
              imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
              imagejpeg($nimg,$imagePath,90);
              
          }
          echo $imagePath.'?'.time();;
          exit(0);    
          }
          
          /*********************************************************************
           Purpose            : resize image.
           Parameters         : null
           Returns            : image
           ***********************************************************************/
          function resizeImage($image,$width,$height,$scale) {
          $newImageWidth = ceil($width * $scale);
          $newImageHeight = ceil($height * $scale);
          $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
          $source = imagecreatefromjpeg($image);
          imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
          imagejpeg($newImage,$image,90);
          chmod($image, 0777);
          return $image;
      }
      /*********************************************************************
           Purpose            : get image height.
           Parameters         : null
           Returns            : height
           ***********************************************************************/
      function getHeight($image) {
          $sizes = getimagesize($image);
          $height = $sizes[1];
          return $height;
      }
      /*********************************************************************
           Purpose            : get image width.
           Parameters         : null
           Returns            : width
           ***********************************************************************/
      function getWidth($image) {
          $sizes = getimagesize($image);
          $width = $sizes[0];
          return $width;
      }
      ?>
       
       
      Jquery
       
      <script type="text/javascript">
              jQuery(document).ready(function(){
              
              jQuery('#change-pic').on('click', function(e){
                  jQuery('#changePic').show();
                  jQuery('#change-pic').hide();
                  
              });
              
              jQuery('#photoimg').on('change', function()   
              { 
                  jQuery("#preview-avatar-profile").html('');
                  jQuery("#preview-avatar-profile").html('Uploading....');
                  jQuery("#cropimage").ajaxForm(
                  {
                  target: '#preview-avatar-profile',
                  success:    function() { 
                          jQuery('img#photo').imgAreaSelect({
                          aspectRatio: '1:1',
                          onSelectEnd: getSizes,
                      });
                      jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
                      }
                  }).submit();
              });
              
              jQuery('#btn-crop').on('click', function(e){
              e.preventDefault();
              params = {
                      targetUrl: 'profile.php?action=save',
                      action: 'save',
                      x_axis: jQuery('#hdn-x1-axis').val(),
                      y_axis : jQuery('#hdn-y1-axis').val(),
                      x2_axis: jQuery('#hdn-x2-axis').val(),
                      y2_axis : jQuery('#hdn-y2-axis').val(),
                      thumb_width : jQuery('#hdn-thumb-width').val(),
                      thumb_height:jQuery('#hdn-thumb-height').val()
                  };
                  saveCropImage(params);
              });
              
           
              
              function getSizes(img, obj)
              {
                  var x_axis = obj.x1;
                  var x2_axis = obj.x2;
                  var y_axis = obj.y1;
                  var y2_axis = obj.y2;
                  var thumb_width = obj.width;
                  var thumb_height = obj.height;
                  if(thumb_width > 0)
                      {
                          jQuery('#hdn-x1-axis').val(x_axis);
                          jQuery('#hdn-y1-axis').val(y_axis);
                          jQuery('#hdn-x2-axis').val(x2_axis);
                          jQuery('#hdn-y2-axis').val(y2_axis);
                          jQuery('#hdn-thumb-width').val(thumb_width);
                          jQuery('#hdn-thumb-height').val(thumb_height);
                          
                      }
                  else
                      alert("Please select portion..!");
              }
              
              function saveCropImage(params) {
              jQuery.ajax({
                  url: params['targetUrl'],
                  cache: false,
                  dataType: "html",
                  data: {
                      action: params['action'],
                      id: jQuery('#hdn-profile-id').val(),
                       t: 'ajax',
                                          w1:params['thumb_width'],
                                          x1:params['x_axis'],
                                          h1:params['thumb_height'],
                                          y1:params['y_axis'],
                                          x2:params['x2_axis'],
                                          y2:params['y2_axis'],
                                          image_name :jQuery('#image_name').val()
                  },
                  type: 'Post',
                 // async:false,
                  success: function (response) {
                          jQuery('#changePic').hide();
                          jQuery('#change-pic').show();
                          jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                          
                          jQuery("#avatar-edit-img").attr('src', response);
                          jQuery("#preview-avatar-profile").html('');
                          jQuery("#photoimg").val('');
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
                  }
              });
              }
              });
          </script>
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
    • By mamotinho
      Olá, estou tentando enviar a url que corresponde a imagem porém não é possivel enviar essa url pois ela é muito grande, teria alguma maneira de eu conseguir fazer esse envio sem perde muito o sentido. já rodei a internet toda mais não conseguir resolver a questão.
      segua abaixo o exemplo
       
      function photo(idx){ var character = idx; (async () => { const { value: file } = await Swal.fire({ input: 'file', inputAttributes: { accept: 'image/*', 'aria-label': 'Selecione sua imagem' } }) if (file) { const reader = new FileReader() reader.onload = (e) => { var mystring = e.target.result; var encodedString = btoa(mystring); //alert(encodedString); //código que envia os dados. new Ajax.Updater('carfunc', 'pag/request/user/swal.php?Idx='+character+'&form=6&image='+encodedString, {method: 'get', asynchronous:true, evalScripts:true}); carregando('#carfunc'); } reader.readAsDataURL(file) } })() }  
       
      Aqui é a chamada da função:
       
      <div class="skillBlock"> <div class="skillBlock-block"> <div class="skillBlock-img"> <img src="images/skill_5.jpg" alt=""> <span class="m-number">3</span> </div> <div class="skillBlock-info" style="cursor:pointer;" onclick="javascript:photo('<?=soNumero(antSQL(anti_injection(htmlspecialchars($rowsCharacter->CharacterIdx))))?>')"> <p>Adicionar Emblema</p> adicione emblema de guild </div> </div> Algum especialista do coração bom poderia me tirar esse sufoco.
    • By gersonab
      Bom dia.
      utilizava um código para completar o endereço conforme o cep, funcionando perfeitamente, só que preciso pegar o cep caso não tenha, pelo endereço digitado, pesquisando pela internet encontrei o código abaixo, funciona perfeitamente para os dois casos, só que .... no meu formulário tenho dois campos de endereço, um residencial e outro de trabalho, o código que utilizava antes funcionava para os dois campos, erá só mudar o id do campo do formulário, tipo se eu tinha id="logadouro" em um campo no outro id="logadouro1", só que .... no código atualizado para ambas as pesquisas esta forma não funciona, gostaria da ajuda de vocês para este problema.
      código antigo:
      function limpa_formulário_cep() { $("#logradouro").val(""); $("#bairro").val(""); $("#localidade").val(""); $("#uf").val(""); } $("#cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#logradouro").val("..."); $("#bairro").val("..."); $("#localidade").val("..."); $("#uf").val("..."); $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#logradouro").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#localidade").val(dados.localidade); $("#uf").val(dados.uf); } else { limpa_formulário_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulário_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulário_cep(); } }); como podem ver era só duplicar e mudar o id, agora neste ja não consigo
      var inputsCEP = $('#logradouro, #bairro, #localidade, #uf'); var inputsRUA = $('#cep, #bairro'); var validacep = /^[0-9]{8}$/; function limpa_formulário_cep(alerta) { if (alerta !== undefined) { alert(alerta); } inputsCEP.val(''); } function get(url) { $.get(url, function(data) { if (!("erro" in data)) { if (Object.prototype.toString.call(data) === '[object Array]') { var data = data[0]; } $.each(data, function(nome, info) { $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info); }); } else { limpa_formulário_cep("CEP não encontrado."); } }); } // Digitando RUA/CIDADE/UF $('#logradouro, #localidade, #uf').on('blur', function(e) { if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) { inputsRUA.val('...'); get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/'); } }); // Digitando CEP $('#cep').on('blur', function(e) { var cep = $('#cep').val().replace(/\D/g, ''); if (cep !== "" && validacep.test(cep)) { inputsCEP.val('...'); get('https://viacep.com.br/ws/' + cep + '/json/'); } else { limpa_formulário_cep(cep == "" ? undefined : "Formato de CEP inválido."); } }); desde já agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.