Deixei o projeto de lado por um bom tempo e no fim do ano passado resolvi retomá-lo. Decidi usar o wordpress como publicador de conteúdo, organizei as coisas, consgui os textos, etc.

O resultado pode ser visto aqui abaixo.

Link: www.conhecendosaopaulo.com

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)

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.

Link para o Aplicativo

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