No dia 17/06/2009, o aplicativo TOP CRAQUES do iG, que antes estava presente somente no Orkut, está presente também no Myspace.
Foram mantidas as mesmas funcionalidades, layout, etc.
A única diferença, é que no Myspace, há mais uma superficie, ou seja, alé da Canvas (Principal) e Profile, há, também, uma superficie chamada home.
HOME
Profile (Perfil)
Canvas (Principal)
No último de 21 de maio, o portal iG lançou o primeiro aplicativo Open Social de sua história.
Este aplicativo foi desenvolvido por… Mim e pelo Vinicius Macedo. A gente desenvolveu esse aplicativo usando a API Opensocial.
Open social segundo o wikipedia:
O Google OpenSocial é uma plataforma do Google baseada em HTML convencional e Javascript. Uma API (Interface de Programação de Aplicativos) aberta que permite que desenvolvedores criem widgets (aplicações ou add-ons) para rodar dentro de redes sociais que aderirem à plantaforma OpenSocial.
Desenvolvemos este aplicativo para o iG esportes. A pessoa que o tenha instalado, poderá votar em todos os mais de 600 jogadores do campeonato brasileiro, votando de um a dez, podendo usar como critério a habilidade ou até mesmo a paixão ou ódio pelo time em que ese jogador atua.
Link para a matéria do iG esportes sobre o aplicativo.
Recentemente, precisei fazer uma galeria de fotos, onde se pudesse navegar entre as fotos e entre os thumbnails. Eu havia feito algo muito parecido com isso anteriormente, porém em FLASH. Como não sou um ÁS em Action Script, a maneira como fiz, é muito ruim para atualizar.
Desta vez, pensei, preciso de uma em Javascript. Procurei muito web a fora, porém não encontrei uma que se encaixasse com o que eu precisava, então resolvi desenvolver uma.
Comecei definindo o layout e as funcionalidades que eu queria.
Defini que eu queria uma galeria com thumbnails abaixo da foto principal, deveria haver uma navegação entre as fotos, e nos thumbs, poderia haver mais do que o exibido sem para isso quebrar o layout, deveria haver uma legenda e uma subleganda.
A partir disso, desenvolvi o layout e em seguida o script.
Em seguida, testei nos Browsers
Resultado…
O Código
<div id="pksgal"> <div id="palco"> <div id="pict"><!-- --></div> <a href="#" onclick="return avancaImage()" class="sail fow"> avançar </a> <a href="#" onclick="return retrocedeImage()" class="sail back"> voltar </a> </div> <div id="title"> <div id="titulo"><!-- --></div> <div id="deta"><!-- --></div> </div> <div class="nav mr5"> <a href="#" onclick="retrocedeThumb()"> <img src="images/voltar.gif" alt="voltar" /> </a> </div> <div id="thumbs"> <div id="thumbgall"> <a href="images/1.jpg" onclick="return abrefoto(this)" title="Stewie|Family Guy"> <img src="images/1.jpg" width="50" height="50" alt="" /> </a> <a href="images/2.jpg" onclick="return abrefoto(this)" title="American DAD|10x20"> <img src="images/2.jpg" width="50" height="50" alt="" /> </a> <a href="images/3.jpg" onclick="return abrefoto(this)" title="American DAD 2"> <img src="images/3.jpg" width="50" height="50" alt="" /> </a> <a href="images/4.png" onclick="return abrefoto(this)" title="Bart|The Simpsons"> <img src="images/4.png" width="50" height="50" alt="" /> </a> <a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a> <a href="images/6.jpg" onclick="return abrefoto(this)" title="Fry|Futurama"> <img src="images/6.jpg" width="50" height="50" alt="" /> </a> <a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a> <a href="images/8.jpg" onclick="return abrefoto(this)" title="Homer|The Simpsons"> <img src="images/8.jpg" width="50" height="50" alt="" /> </a> <a href="images/9.jpg" onclick="return abrefoto(this)" title="Marge | The Simpsons"> <img src="images/9.jpg" width="50" height="50" alt="" /> </a> <a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a> <a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a> </div> </div> <div class="nav ml5"> <a href="#" onclick="avancaThumb()"> <img src="images/avancar.gif" alt="avançar" /> </a> </div> </div> <script type="text/javascript">selecionaP();</script>
Como usar
Baixe o arquivo, copie todo o conteúdo entre o Body cole onde você quer que a galeria fique. Para alterar os thumbs, altere o código <img src=“images/1.jpg” width=”50″ height=”50″ alt=”" />, colocando o caminho da sua imagem, coloque quantas você quiser ou precisar.
Para alterar a imagem de destino, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg“>, esse é o caminhop onde a imagem está.
Para alterar a legenda, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg”>, onde o que vem antes de | é a legenda e o que vem depois é a Sublegenda
Vejam funcionando.
http://gallery.leandrogarcia.com/
E… Aproveitem.
Release V 0.1 02/03/2009
Enviado por: Leandro Garcia - Categoria(s): Projetos Tags relacionadas: fotos, galeria de fotos, imagens, JavaScript, JS