3, 2, 1... GALERIA DE FOTOS (CREAR GALERIA PROPIA DE FOTOS PARA WEB)


¡Hola a tod@s (Hello World!)!

En este artículo vamos a aprender a crear un Una Galería de Fotos.
¡Comenzamos! 

En este artículo vamos a recoger un include de javascript de la librería JQuery, vamos a crear un contador para que la página obtenga el número de foto actual y un "Array" o una lista ordenada con las fotografías que queremos mostrar y mediante una función comparando el contador y la longitud del Array vamos a determinar la fotografía a mostrar.

El avanzar y retroceder incrementarán o decrementarán el contador respectivamente.

Como siempre nos apoyaremos en dos etiquetas fundamentales para generar un html como son el head y el body.


<html>
 <head>
  <!-- CABECERA DEL HTML --> 
 </head>
 <body>
  <!--CUERPO DEL HTML -->
 </body>
</html>

 En el head tenemos:


<head>
 <!-- LIBRERIA JQUERY -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <!-- NUESTO SCRIPT -->
 <script type="text/javascript">
 // Variable contador.
 var contador = 0;
 // Array con las imagenes.
 var ArrayGaleria = new Array();
 ArrayGaleria[0] = "[direccionURLFoto1]";
 ArrayGaleria[1] = "[direccionURLFoto2]";
 ArrayGaleria[2] = "[direccionURLFoto3]";
 ArrayGaleria[3] = "[direccionURLFoto4]";
 // Función para cambiar la foto
 function MostrarFoto(incremento)
 {
  var longitudArray = ArrayGaleria.length - 1;
  contador = contador + (incremento);

  if(contador > longitudArray)
  {
   contador = 0;
  }
  else if(contador < 0)
  {
   contador = longitudArray;
  }
  $("#iFoto").attr("src", ArrayGaleria[contador]);
  $("#numeroFotos").text((contador+1) + "/" + (ArrayGaleria.length));
 }
 // Primera Carga de la Página
 $(document).ready(
  function()
  {
   $("#iFoto").attr("src", ArrayGaleria[0]);
   $("#iFoto, #iAnterior, #iSiguiente").css("cursor", "pointer");
   $("#numeroFotos").text((contador+1) + "/" + (ArrayGaleria.length));
  }
 );
 </script>
</head>

En el body vamos a construir una tabla con dos filas, una fila con una etiqueta img donde pintaremos la imagen a través de la función javascript propia que hemos creado en el head, y en la segunda fila construiremos un img con la flecha anterior que decrementará el contador, un span para pintar el número de fotografía en el que estamos y un img con la flecha siguiente que incrementará el contador.
Los eventos de las imagenes (etiquetas img) que se ejecutan al hacer click se llaman onclick y llamarán a la función construida MostrarFoto(incremento).


Así que tenemos en el body lo siguiente:

<body>
 <h1>III TORNEO DE PROMOCION C.A. MAR MENOR - HOTEL TRAIÑA - TROFEOS</h1>
 <table style="margin:0 auto;">
  <tr>
   <td colspan="3">
    <div style="text-align:center;">
     <img id="iFoto" src="" onclick="MostrarFoto(+1);" />
    </div>
    <hr />
   </td>
  </tr>
  <tr>
   <td>
    <img id="iAnterior" src="[direccionUrlFlechaAnterior]" 
    alt="Anterior" onclick="MostrarFoto(-1);" />
   </td>
   <td style="text-align:center;">
    <span id="numeroFotos"></span>
   </td>
   <td style="text-align:right;">
    <img id="iSiguiente" src="[direccionUrlFlechaSiguiente]" 
    alt="Siguiente" onclick="MostrarFoto(+1);" />
   </td>
  </tr>
 </table>
</body>

Un ejemplo de salida del html es la siguiente (con las fotos de los premiados en el Traiña):

III TORNEO DE PROMOCION C.A. MAR MENOR - HOTEL TRAIÑA - TROFEOS


Anterior Siguiente

1 comentarios :

Facebook


Estadisticas

Envía tu torneo

Nombre

Correo electrónico *

Mensaje *