Publicado em 30 de jan.

Script de Paginação de fotos sem Refresh.

Bem, estou disponibilizando este script para ajudar quem está iniciando (estudos) e para quem já tem mais esperiencia ajudar a melhorar, por ex colocando loadings e etc.

Exemplo On-line:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.afixar.com.br/etc/downloads/afx_fotos/

<body topmargin="0" leftmargin="0">

<script language="JavaScript">

// Define as fotos na Array fotos

var fotos = new Array('images/001.jpg','images/002.jpg','images/003.jpg');

// Conta o Total de fotos var total = fotos.length; // Define uma posição inicial var posicao = 1; // Define a imagem inicial

var ft_src = fotos[0];

function show(act){
 //Soma -1 do total da posição
 if(act=='back'){ var ft_n = --posicao; }
 //Soma +1 do total da posição
 if(act=='next'){ var ft_n = posicao++; }
 // Esconte a opção de voltar caso seja meno ou igual a 0
 if(posicao <= 0) { document.getElementById('back').style.display='none'; } else { document.getElementById('back').style.display='block'; }
 // Esconte a opção de avançar caso seja igual a 0
 if(posicao == total) { document.getElementById('next').style.display='none'; } else { document.getElementById('next').style.display='block'; }
 // Define a foto que irá aparecer
 var ft_src = fotos[ft_n];
 document.getElementById('foto').src=ft_src;
 // Escreve a posição para visualizar
 window.document.getElementById('paginacao').innerHTML = posicao+' / '+total;
}

// Define as imagens dos botões

function img(id,img){
	document.getElementById(id).src=img;
}

// Esconde as imagens dos botões

function hidden(){
	document.getElementById('back').src='images/transparente.gif';
	document.getElementById('next').src='images/transparente.gif';
}
</script>

<style>
.paginacao

{

 z-index: 2;
 position: absolute;
 padding-left: 2px;
 padding-right:	2px;
 left: 380;
 top: 0;
 background-color: black;
 font-family: Tahoma, Arial, Verdana;
 font-size: 8pt;
 color: #FFFFFF;
}
.back

{

 z-index: 1;
 display: none;
 position: absolute;
 top: 0px;
 left: -1px;
}
.next {
 z-index: 1;
 display: block;
 position: absolute;
 top: 0;
 left: 485;
}
</style>

<div id="paginacao" class="paginacao"></div>
<img id="foto" onmouseover="hidden();" border="0" src="images/transparente.gif" width="793" height="396">
<a href="java script:show('back');"><img id="back" onmouseover="img('back','images/ft_back.gif');" border="0" src="images/ft_back.gif" width="308" height="395" class="back"></a>
<a href="java script:show('next');"><img id="next" onmouseover="img('next','images/ft_next.gif');" border="0" src="images/ft_next.gif" width="308" height="395" class="next"></a>

<script language="JavaScript">

// Define a foto document.getElementById('foto').src=ft_src; // Define a posição

window.document.getElementById('paginacao').innerHTML = posicao+' / '+total;
</script>

Versão para download

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.afixar.com.br/etc/downloads/afx_fotos.zip

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

z-index: 2; position: absolute; padding-left: 2px; padding-right: 2px; left: 380; top: 0; background-color: black; font-family: Tahoma, Arial, Verdana; font-size: 8pt; color: #FFFFFF; } .back

z-index: 1; display: none; position: absolute; top: 0px; left: -1px; } .next { z-index: 1; display: block; position: absolute; top: 0; left: 485; } </style> <div id="paginacao" class="paginacao"></div> <img id="foto" onmouseover="hidden();" border="0" src="images/transparente.gif" width="793" height="396"> <a href="java script:show('back');"><img id="back" onmouseover="img('back','images/ft_back.gif');" border="0" src="images/ft_back.gif" width="308" height="395" class="back"></a> <a href="java script:show('next');"><img id="next" onmouseover="img('next','images/ft_next.gif');" border="0" src="images/ft_next.gif" width="308" height="395" class="next"></a> <script language="JavaScript">