Sweet Thumbnails para jQuery

JMiur

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 o bien usar este archivo de texto. 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:

<div id="loader" class="loader"></div>

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


<div class="ps_image_wrapper">
<img src="URL_primera_imagen"/>
</div>


<div class="ps_next"></div>

<div class="ps_prev"></div>




<ul class="ps_nav">


<li class="selected"><a rel="URL_miniatura_1" href="URL_primera_imagen">imagen 1</a></li>


<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>

<li><a rel="URL_miniatura_X" href="URL_ultima_imagen">imagen 4</a></li>


<li class="ps_preview">
<div class="ps_preview_wrapper"></div>
<span></span>
</li>

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