Vimos por aí na internet muitos slides de imagens bem legais em jquery e outros...
Mas um slide em especial me chamou muito a atenção: O slide The Piecemaker2, um slide open source em Flash e xml que tem plugin até para Wordpress...
Andei estudando o código-fonte desse slide e gostei muito do seu funcionamento.
No site modularweb.net você confere o demo do slide além da documentação e tutorial de como usá-lo no seu código HTML, até mesmo no wordpress...
Para dar água na boca, confira o que o Piecemaker Flash 3D Slide nos oferece:
* Ilimitados efeitos de transição
* A capacidade de incluir arquivos SWF e vídeos
* Melhor navegação (usando as dicas)
* Sombras animadas
Também é inteiramente baseado em XML, HTML e o CSS foi melhorado em relação ao primeiro, permitindo que os caracteres especiais possam ser utilizados. Além disso, as imagens agora podem conter links para outros websites.
E no WordPress?
Muitos leitores queriam usar a galeria Piecemaker original em seus blogs WordPress - tanto que o site NETTUTS + publicou um tutorial (em inglês) explicando como fazer exatamente isso.
O Piecemaker 2 é open source, fique à vontade para baixá-lo, usá-lo em qualquer projeto que você gosta, aprender com ele, modificá-lo e melhorá-lo se você puder. Gostaríamos de ver o que você faz com ele.
Aqui vai um exemplo de arquivo HTML com o slide, tirado do site oficial:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The Piecemaker by Modularweb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "piecemaker.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,
params, null);
</script>
</head>
<body>
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
</body>
</html>
Acesse o site oficial e faça o download...e divirta-se...
Boa garoto Junior, estou neste exato momento estudando este Slide..para poder incorpora-lo no querido WordPress
ResponderExcluirPoxa camarada, muito legal mesmo, mas tentei tantas vezes que perdi a conta. sera que vc ppderia me ajudar nisso!? Ficaria muito agradecido,
ResponderExcluirmeu msn é: diniz-cardoso@hotmail.com..estou sempre na linha, se puder me add acredito que juntos pderemos resolver esta qestão.
Mais uma vez ovrigado pelo post e continue o bom rabalho.
Olá Diniz tudo bem??
ResponderExcluirEsse slide é sim um pouco complicado de se usar...
mas dê uma olhada nesse template grátis você pode estudar o código fonte dele e ver como exatamente ele é incluído no código HTML ok? Faça o download do tema e veja todos os arquivos...qqr dúvida estamos aí!!
Aí vai o link:
http://www.templatemo.com/preview/templatemo_281_chrome
Um abraço!
@junim_ramos
o piecemaker não funciona corretamente em versões muito antigas do ie e na versão atual (ie9 ) vc conheceria alguma maneira de se usar na versão atual do ie sem ocorrer esses erros??
ResponderExcluirEu não consigo colocar swf no lugar das imagens.Tem como?
ResponderExcluirComo ajustar a largura e altura do slide?
ResponderExcluirBoas
ResponderExcluirConsigo implementar o Piecemaker, mas estou tentando usar simultaneamente com um smooth scroll mas tenho tido problemas de compatibilidade alguém me pode ajudar?
Cumprimentos,
Francisco Costa