Galería de fotos

Elalux · #1 (**permalink**) 06/05/2005, 12:46

Saludos maestros.

Fjense que necesito´un Script de galería, de esos que aparace una foto y abajo unas flechitas de "siguiente" y "anteriror" para ir recorriendo las fotos.

Alguien me podria hechar una manita para encontrar alguno?

Agradeceré cualquier ayuda.

Saludos.

Santiago Cortes · #2 (**permalink**) 06/05/2005, 14:13

Aqui te va uno sencillo

Código:

///////////////////////////////////

<html>
<head>
<title>.:: Galeria de Fotos ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body scroll="no" bgcolor="#FAF3E7" link="#952A3E" vlink="#952A3E" alink="#952A3E" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="10" colspan="3"></td>
  </tr>
  <tr> 
    <td width="21%" align="center">&nbsp;</td>
    <td width="55%" align="center"><font size="4" face="Arial, Helvetica, sans-serif"><strong><font color="#A01E1B" size="2" face="Verdana, Arial, Helvetica, sans-serif">GALER&Iacute;A DE FOTOS </font></strong></font></td>
    <td width="24%">&nbsp;</td>
  </tr>
  <tr> 
    <td height="10" colspan="3"></td>
  </tr>
  <tr> 
    <td width="21%" align="center">&nbsp;</td>
    <td align="center"><input name="btnPrev" onClick="Prev();" type="button" value="&lt;&lt; Anterior" style="border-style: solid; border-width: 1"> 
      <input name="btnNext" onClick="Next();" type="button" value="Siguiente &gt;&gt;" style="border-style: solid; border-width: 1"></td>
    <td width="24%">&nbsp;</td>
  </tr>
  <tr> 
    <td height="10" colspan="3"><hr color="#952A3E" width="95%"></td>
  </tr>
  <tr> 
    <td colspan="3" align="center"> <table width="13%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#A01E1B">
        <tr> 
          <td align="center" bgcolor="#A01E1B"><b><font color="#FFFFFF" size="1" face="verdana">Im&aacute;gen: <span id="_Ath_Img_X">2</span> - <span
    id="_Ath_Img_N">4</span></font></b></td>
        </tr>
        <tr> 
          <td align="center" bgcolor="#A01E1B"><img name="_Ath_Slide" onload="OnImgLoad()" border="0"></td>
        </tr>
      </table>
      <b><span id=_Ath_FileName></span></b></td>
  </tr>
</table>
<script event="onload" for="window" language="JavaScript1.2">
main();
  </script>
    <script language="JavaScript1.2">
g_fPlayMode = 0;
g_iimg = 0;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}

Update();
}

function Update(){
document.all._Ath_Slide.src = g_ImageTable[g_iimg][0];
document.all._Ath_FileName.innerHTML = g_ImageTable[g_iimg][1];
document.all._Ath_Img_X.innerHTML = g_iimg + 1;
document.all._Ath_Img_N.innerHTML = g_imax;
}

function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
btnPrev.disabled = btnNext.disabled = true;
Next();
}
else 
{
btnPrev.disabled = btnNext.disabled = false;
}
}

function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*0);
}

function Tick() 
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}
function main()
{
Update();
}

////configure below variables/////////////////////////////
//configure the below images and description to your own. 
	g_ImageTable[g_imax++] = new Array ("fotos/desfile1.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile2.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile3.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile4.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile5.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile6.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile7.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile8.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile9.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile10.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile11.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile12.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile13.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile14.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile15.jpg","");
	g_ImageTable[g_imax++] = new Array ("fotos/desfile16.jpg","");
	
//extend the above list as desired
g_dwTimeOutSec=1
////End configuration/////////////////////////////
window.onload=Play
  </script>
</body>

</html>

Espero te sirva

caricatos · #3 (**permalink**) 06/05/2005, 16:47

Hola Elalux:

No sé si te podrán servir, pero algunos de los foreros tenemos nuestra propia galería...

Fíjate en los siguientes sitios:
http://www.javascript.tunait.com
http://www.carlitos.com.es
http://www.pepemolina.com/galeria

Santiago Cortes: No he probado tu código, pero viendo "document.all" me hace pensar que en mozilla no funciona...

Saludos

Elalux · #4 (**permalink**) 06/05/2005, 17:58

Hombre señores muchísimas grácias los voy a probar.

Saludos.