Galeria de fotos en jQuery

Anterior
Siguiente

Uso:

  1. Agrega antes de la etiqueta </head> las siguientes lineas:

    <link rel="stylesheet" href="css/galeria.css" />

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/galeria.js"></script>

  2. Y dentro del contenido (entre <body> y </body>) de la siguiente manera:

    <div id="galeria">
      <ul class="galeria">
        <li>
          <!-- Imagen o texto -->
          Recuadro 1
        </li>
        <li>
          <!-- Imagen o texto -->
          Recuadro 2
        </li>
        <li>
          <!-- Imagen o texto -->
          Recuadro 3
        </li>
        <li>
          <!-- Imagen o texto -->
          Recuadro ...
        </li>
        <li>
          <!-- Imagen o texto -->
          Recuadro N
        </li>
      </ul>

      <div class="navigation">
        <div class="navprev"></div>
        <div class="navnext"></div>
      </div>
    </div>

  3. De manera automática asignara la clase "foto_n" a cada reacuadro, además a los recuadros visibles se asignara la clase "show" y a los ocultos la clase "hide"

Descargar - Soporte