Fala Pessoal,
Encontrei um slider para antes e depois bem interessante que funciona bem.
Catch my Frame link
O problema que encontrei foi ao juntar com o Bootstrap (vou explicar melhor o bootstrap nos próximos posts). Acontece que ao testar a imagem de cima fica menor e por cima da outra e o slider acompanha apenas a de cima. Dei uma pesquisada, após alguns testes, achei que fosse conflito de bibliotecas jquery, porém não foi, quando removi o arquivo bootstrap.css funcionou 100%. Quando coloquei novamente o arquivo o bug voltou. Resolvi então procurar id e classes em comum, porém não tinha nenhuma com o mesmo nome no arquivo jquery.beforeafter-1.4.min.js. Sobrou então a tag IMG do bootstrap, e foi isso. Segue abaixo o que fiz para funcionar:
(no arquivo bootstrap.css linha 101 aprox comente as 3 linhas abaixo).
img {
/*width: auto\9;
height: auto;
max-width: 100%;*/
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Acabei de fazer isso, por enquanto não prejudicou em nada as imagens que estou utilizando, caso encontre algum erro em outros usos de imagens com bootstrap comenta abaixo para eu deixar atualizado aqui, ok?
OPA! Realmente existe um problema, ao comentar ali em cima as imagens passam a não se ajustar responsivamente nos SPANs do Row-fluid. Ainda não achei uma solução que combine ambas, se encontrar atualizo aqui. A sugestão é que pode mandar um Gambiware e cortar essa tag do css bootstrap e quando for utilizar em outras páginas você cola em um arquivo css separado e utiliza ela. O problema é quando quiser utilizar ambas na mesma página como estou tentando fazer....Bom vamos lá, tem que ter solução, rs. Se encontrar algo, posta que conversamos. Obrigado.
Uma solução interessante que encontrei é, manter comentado no bootstrap.css e quanto for utilizar criar uma classe para essa div span, ex:
.images img{
width: auto\9;
height: auto;
max-width: 100%;
}
Parece funcionar bem.
Valeu!
Espero que ajude!
quarta-feira, 31 de julho de 2013
Customizar File Input - EnhanceJS
Fala Galera,
encontrei um link bem interessante, é de um livro que ensina a utilizar o EnhanceJS um framework Jquery que traz muitos exemplos, e o legal é que disponibilizaram alguns exemplos do livro para download free. O que achei bem legal é o File Input, procurei muito alguma coisa para tentar deixar mais apresentável o File Input e encontrei.
Segue abaixo o link direto para todos os exemplos do livro e os que estão disponíveis para download.
http://filamentgroup.com/dwpe/#codeexamples
Espero que curta. Esse já utilizei e funcionou 100%, então eu juntei e adaptei com a Classe de Upload do PHP que postei ontem e já começou a ficar interessante.
Até a próxima! Valeu pela visita!
encontrei um link bem interessante, é de um livro que ensina a utilizar o EnhanceJS um framework Jquery que traz muitos exemplos, e o legal é que disponibilizaram alguns exemplos do livro para download free. O que achei bem legal é o File Input, procurei muito alguma coisa para tentar deixar mais apresentável o File Input e encontrei.
Segue abaixo o link direto para todos os exemplos do livro e os que estão disponíveis para download.
http://filamentgroup.com/dwpe/#codeexamples
Espero que curta. Esse já utilizei e funcionou 100%, então eu juntei e adaptei com a Classe de Upload do PHP que postei ontem e já começou a ficar interessante.
Até a próxima! Valeu pela visita!
Facebook Debugger - Link para verificar meta tags do Facebook ao compartilhar
Para quem quer saber como deixar seu link (ou site) completo ao compartilhar no facebook, segue o link que te ajuda com as meta tags que ficam dentro da tag <head>.
http://developers.facebook.com/tools/debug
Só acessar, colocar o link que deseja verificar e dar um DEBUG. Ele vai te mostrar se está conseguindo pegar todas as informações. Uma dica importante que percebi quando acessei, ao compartilhar no facebook às vezes ele mostra algumas imagens que ele consegue "puxar" do próprio link, você pode definir essa imagem na tag (não deixe de colocar todas que aparecem no Debugger).
<meta property="og:image" content="http://www.seusite.com.br/suaimagem.jpg"/>
Lembrando que ela deve ter no mínimo 200 de largura (width). Geralmente é um quadrado que aparece no compartilhamento do facebook.
É isso!
Valeu!
http://developers.facebook.com/tools/debug
Só acessar, colocar o link que deseja verificar e dar um DEBUG. Ele vai te mostrar se está conseguindo pegar todas as informações. Uma dica importante que percebi quando acessei, ao compartilhar no facebook às vezes ele mostra algumas imagens que ele consegue "puxar" do próprio link, você pode definir essa imagem na tag (não deixe de colocar todas que aparecem no Debugger).
<meta property="og:image" content="http://www.seusite.com.br/suaimagem.jpg"/>
Lembrando que ela deve ter no mínimo 200 de largura (width). Geralmente é um quadrado que aparece no compartilhamento do facebook.
É isso!
Valeu!
terça-feira, 30 de julho de 2013
Upload Class Image PHP - Upload de imagens classe php
Para quem procura uma classe para upload de imagens, essa aqui é bem interessante e possui algumas funções que fazem a diferença
http://www.verot.net/php_class_upload_download.htm
Já utilizei, fiz alguns ajustes, não lembro exatamente quais, sei que funcionou legal.
Até a próxima!
http://www.verot.net/php_class_upload_download.htm
Já utilizei, fiz alguns ajustes, não lembro exatamente quais, sei que funcionou legal.
Até a próxima!
Corrigindo margens 2 linha thumbnails Bootstrap (correct margins second line)
Fala Galera!
Esse link merece um post, para quem já teve problemas como esse aqui embaixo utilizando o bootstrap não somente em thumbnails mas também usando spans e row-fluid.
Se você está sofrendo com isso, segue a solução:
http://stackoverflow.com/questions/15576483/margin-problems-with-thumbnails-in-bootstrap
Já utilizei e funcionou 100%, se tiver uma pasta que sempre utiliza o bootstrap já substitua para não ter que caçar de novo o erro como fiz agora pouco, haha. Agora já corrigi na raiz.
Para facilitar segue abaixo o texto que deve ser inserido no arquivo bootstrap-responsive.css (eu coloquei na linha 145).
ul.thumbnails li.span4:nth-child(3n + 4) {
margin-left : 0px;
}
Espero que ajude!
;)
Esse link merece um post, para quem já teve problemas como esse aqui embaixo utilizando o bootstrap não somente em thumbnails mas também usando spans e row-fluid.
Se você está sofrendo com isso, segue a solução:
http://stackoverflow.com/questions/15576483/margin-problems-with-thumbnails-in-bootstrap
Já utilizei e funcionou 100%, se tiver uma pasta que sempre utiliza o bootstrap já substitua para não ter que caçar de novo o erro como fiz agora pouco, haha. Agora já corrigi na raiz.
Para facilitar segue abaixo o texto que deve ser inserido no arquivo bootstrap-responsive.css (eu coloquei na linha 145).
ul.thumbnails li.span4:nth-child(3n + 4) {
margin-left : 0px;
}
Espero que ajude!
;)
jQuery - Carregar páginas (loading content with ajax)
Opa!
Para quem procura um exemplo de site que carregue o conteúdo via ajax direto na mesma página segue o link no nettuts.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
Eu curto ver o exemplo antes de ler o post para saber que é realmente o que procuro, se você também prefere aqui vai o exemplo final (está no final do post tanto para download quanto a demo).
http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html
É isso!
Até a próxima!
Para quem procura um exemplo de site que carregue o conteúdo via ajax direto na mesma página segue o link no nettuts.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
Eu curto ver o exemplo antes de ler o post para saber que é realmente o que procuro, se você também prefere aqui vai o exemplo final (está no final do post tanto para download quanto a demo).
http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html
É isso!
Até a próxima!
Superscrollorama - Scroll com animações
Fala pessoal!
Estou postando diversos links que encontro dia-a-dia pela internet que são muito úteis e estão disponíveis para download! Acho que é uma forma de retribuir por também fazer uso dos materiais que encontro.
Esse plugin é para quem quer um scroll com animações, você vai descendo a página e os itens vão se animando.
http://johnpolacek.github.io/superscrollorama/
Não cheguei a baixar, parece bem explicado no link que já está demonstrando. Fica a dia!
Valeu!
Estou postando diversos links que encontro dia-a-dia pela internet que são muito úteis e estão disponíveis para download! Acho que é uma forma de retribuir por também fazer uso dos materiais que encontro.
Esse plugin é para quem quer um scroll com animações, você vai descendo a página e os itens vão se animando.
http://johnpolacek.github.io/superscrollorama/
Não cheguei a baixar, parece bem explicado no link que já está demonstrando. Fica a dia!
Valeu!
jQuery Parallax Plugin Demo
Para quem está procurando um plugin Parallax, aqui vai um link do bom!
http://ianlunn.co.uk/plugins/jquery-parallax/
Este link é para visualizar, acessando o GitHub do Ian Lunn você encontra o link do Parallax para baixa-lo. Ainda não fiz nenhum projeto utilizando Parallax, acho que tem que ser algo bem específico para utilizar o efeito sem deixar o usuário perdido ou sem saber o que acontece no computador dele, rs. Depende muito do uso, mas acho bastante interessante! E legal poder ter uma demo dessa para começar!
Manda ver! E aproveita que no primeiro link da Demo embaixo o Ian colocou alguns links que utilizou para fazer a demo bem legais também.
http://ianlunn.co.uk/plugins/jquery-parallax/
Este link é para visualizar, acessando o GitHub do Ian Lunn você encontra o link do Parallax para baixa-lo. Ainda não fiz nenhum projeto utilizando Parallax, acho que tem que ser algo bem específico para utilizar o efeito sem deixar o usuário perdido ou sem saber o que acontece no computador dele, rs. Depende muito do uso, mas acho bastante interessante! E legal poder ter uma demo dessa para começar!
Manda ver! E aproveita que no primeiro link da Demo embaixo o Ian colocou alguns links que utilizou para fazer a demo bem legais também.
Assinar:
Postagens (Atom)