Sweet Thumbnails para jQuery

Sweet Thumbnails Gallery es otro de esos scripts para jQuery que muestran galerías de imágenes pero con algiunos detalles gráficos muy interesantes tales como la previsualización de esas imagenes y la precarga de ellas.

Empezamos poniendo la librería antes de </head> como siempre:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>

Y luego el script que tiene dos partes y que puede ser descargado junto con el demo desde la página del autor. Pegamos entonces todo eso a continuación de lo anterior y sólo nos falta el CSS que requiere de cinco imágenes: loader.gif, next.png, prev.png, triangle.png, dot.png que, por supuesto, podemos cambiar a gusto.

<style>
.loader { /* acá se mostrará la imagen del cargador */
  background: #FFF url(URL_loader.gif) no-repeat 50% 50%;
  height:70px;
  left: 50%;
  margin:- 35px 0px 0px -35px;
  opacity: 0.7;
  position: fixed;
  top: 50%;
  width: 70px;
  z-index: 1000;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 0 0 5px #DEF;
  -webkit-box-shadow: 0 0 5px #DEF;
  box-shadow: 0 0 5px #DEF;
}
.ps_container { /* al contenedor lo dimensionamos según sea el tamaño de las imágenes a utilizar */
  display: none;
  height: 420px;
  margin: 0 auto;
  position: relative;
  width: 550px;
}
.ps_image_wrapper {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 420px;
  width: 550px;
  -moz-box-shadow: 0 0 5px #DEF;
  -webkit-box-shadow: 0 0 5px #DEF;
  box-shadow: 0 0 5px #DEF;
}
.ps_image_wrapper img { /* las imágenes de la galería */
  left: 0;
  position: absolute;
  top: 0;
  /* conviene darles un tamaño igual a todas ellas */
  height: 420px;
  width: 550px;
}
.ps_prev, .ps_next { /¨* las imágenes para ir atrás y adelante */
  cursor: pointer;
  height: 59px;
  position: absolute;
  margin-top: -40px;
  opacity: 0.5;
  top: 50%;
  width: 30px;
}
.ps_prev { /* anterior */
  background: transparent url(URL_prev.png) no-repeat 0 50%;
  left: -50px;
}
.ps_next {  /* siguiente */
  background: transparent url(URL_next.png) no-repeat 0 50%;
  right: -50px;
}
.ps_prev:hover, .ps_next:hover { opacity:0.9; }
ul.ps_nav { /* los circulos inferiores que previsualizan las imágenes */
  list-style-type: none;
  margin: 20px auto;
  padding: 0;
  position: relative;
  width: 170px;
}
ul.ps_nav li { float:left; }
ul.ps_nav li a {
  background: transparent url(URLdot.png) no-repeat 0 50%;
  display: block;
  height: 11px;
  outline: none;
  padding: 0 3px;
  text-indent: -9000px;
  width: 11px;
}
ul.ps_nav li a:hover,ul.ps_nav li.selected a { background-position:50% -11px; }
ul.ps_nav li.ps_preview { /* las minaituras de previsualización */
  display: none;
  height: 91px;
  left: -34.5px;
  position: absolute;
  top: -95px;
  width: 85px;
}
ul.ps_nav li.ps_preview span {
  background: transparent url(URL_triangle.png) no-repeat 0 50%;
  height: 6px;
  left: 35px;
  position: absolute;
  top: 85px;
  width: 15px;
}
.ps_preview_wrapper { */ el marco de las miniaturas */
  border: 5px solid #FFF;
  height: 75px;
  overflow: hidden;
  position: relative;
  width: 75px;
  -moz-box-shadow: 0 0 5px #DEF;
  -webkit-box-shadow: 0 0 5px #DEF;
  box-shadow: 0 0 5px #DEF;
}
.ps_preview_wrapper img { /* cada miniatura */
  left: 0;
  position: absolute;
  top: 0;
  /* conviene darles un tamaño igual a todas ellas */
  height: 75px;
  width: 75px;
}
</style>

El HTML es bastante sencillo pero debemos tener cuidado en no olvidarnos de ninguno de los DIVs:

<!-- acá se mostrará la imagen de carga -->
<div id="loader" class="loader"></div>

<div class="wrapper">
  <div id="ps_container" class="ps_container">

  <!-- acá se mostrarán las imágenes -->
  <div class="ps_image_wrapper">
      <img src="URL_primera_imagen"/>
    </div>

    <!-- acá se verán las imágens de atrás y adelante  -->
    <div class="ps_next"></div>
    <div class="ps_prev"></div>

    <!-- la lista de imágenes -->
    <!-- en HREF ponemos la dirección de la imagen original -->
    <!-- en REL ponemos la dirección de la miniatura -->
    <ul class="ps_nav">

      <!-- la primear tiene la clase selected -->
      <li class="selected"><a rel="URL_miniatura_1" href="URL_primera_imagen">imagen 1</a></li>

      <!-- ponemos una debajo de la otra -->
      <li><a rel="URL_miniatura_2" href="URL_segunda_imagen">imagen 2</a></li>
      <li><a rel="URL_miniatura_3" href="URL_tercera_imagen">imagen 3</a></li>
      <!-- seguimos agregando tantas como se nos ocurra -->
      <li><a rel="URL_miniatura_X" href="URL_ultima_imagen">imagen 4</a></li>

      <!-- acá se mostrarán las miniaturas -->
      <li class="ps_preview">
        <div class="ps_preview_wrapper"></div>
        <span></span>
      </li>

    </ul>
  </div>
</div>