Jump to content

André Ciappina

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About André Ciappina

  1. E aí pessoal! Eu tô desenvolvendo um modelo de portfólio fotográfico, por razões de aprendizado mesmo, mas travei em um momento e passei o dia pesquisando como fazer isso. Basicamente, é uma espiral áurea de imagens que trocam de lugar, dando a impressão de infinidade. Se você clicar na maior, ela fica em tela cheia; Clicando nas outras, todas as imagens se movem ao quadrado seguinte. Até agora há pouco, eu estava fazendo isso mudando a posição de cada div onde a imagem fica, por meio de addClass() e removeClass(). Só que assim tava muito difícil imaginar como eu alcançaria o efeito de infinidade das imagens, já que apenas seis imagens aparecem de cada vez, então são seis DIVs se movimentando a cada clique - isso se complicaria quando eu tentasse colocar muitas imagens a serem disponibilizadas na página. Mas hoje eu tentei outro método: agora são 6 divs com uma imagem dentro cada um, mas não é a posição deles que mudará, e sim o atributo src="" da tag <img/>. Pra isso, usei attr(). Então cada src altera de valor em fila, cada vez que eu clico no gatilho. Só que mudar o src vai além de CSS, então eu não posso usar transition como antes. Agora o máximo que eu posso fazer é um crossfade entre as imagens. Só que o fadeOut() e fadeIn() também não funcionam! Tecnicamente, funcionam, mas não visualmente. Pra consertar isso eu já tentei delay(), stop(), finish(), promise(), toggleClass() entre outros jeitos. Bom, já falei demais, vocês podem ver a página funcionando no CodePen: https://codepen.io/dehciappina/pen/yjWOdM Nesse código eu usei toggleClass, pois foi o único jeito que consegui ver um fade de verdade. Mas, obviamente, não funciona, já que o toggle se aplica à mesma tag <img/> e ou faz ela desaparecer completamente com um clique, ou eu uso dois toggle e eles se anulam quando a função é chamada. Bom, é isso, espero ter me explicado o suficiente. Obrigado!!!
  2. André Ciappina

    Inserindo Iframes por JavaScript

    Bom, basicamente: existem vários botões, e quando clicados um iframe específico deste botão é inserido no html. function prepareFrame() { var ifrm = document.createElement("iframe"); ifrm.setAttribute("src", linkYoutube); /*estilos do iframe*/ espaco_iframe.html(ifrm); /*insere o iframe em forma de html */ } var espaco_iframe = $('.div_planilhas_youtube') var linkYoutube = $('.div_planilhas_youtube').data('href'); /*busca no html o data_href específico daquele botão, pra usar como URL do iframe*/ $('#tabela_funcoes tr td').click(function() { /*disparando o função pelo clique*/ prepareFrame(this); }) O ÚNICO problema está sendo: Os vídeos abrem com o clique, mas a função continua a usar somente o primeiro data_href correspondente. Aí o vídeo acaba sendo o mesmo pra todos os botões. Já tentei: function(this) this prepareFrame() prepareFrame() this prepareFrame(this) tô começando a ficar desesperado adnodkspnpkasda Muito obrigado a quem se dispor!
×

Important Information

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