JMiur [E]

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

12 comentarios:

Graciela  

Qué bonito, qué bonito :D

Responder
Σ=o) Pau  

Algo largo el div para poner las imágenes y a la vez fácil y muy lindo como presentación :D me encantaaaaaaaaa ^_^
Buscaba una presentación sencilla y ésta me ha gustado mucho.

Besos ronroneados en mi abrazo, feliz comienzo de semana ^_^

Responder
JMiur  

Es para divertirse. Me pareció facil de usar :-)

Responder
Dimension Moviles  

Jmiur se le puede sar la opcion de que pasen solas la imegenes?
salduos que andes bien.

Responder
JMiur  

Dimension Moviles:
No tiene esa opción o por lo menos, no he visto ninguna.

Responder
LJK  

Genial JmiUr , una consulta el tamaño es predifinido por la imagen que se inserta?

Responder
JMiur  

Si. El tamaño se difine nada más que por la imagen aunque el ancho total, depende también de las imágenes que se utilicen como enlaces para avanzar y retroceder.

Responder
Diego Zulueta Piastra  

Una simple pregunta. Si quiero usarlo en mis posts para mostrar imágenes de ejercicios, ¿no tendré problemas de visualización? El loader tiene una única id, ¿tendré que definir distintos id para cada una de las galerías?

Responder
Diego Zulueta Piastra  

¿Se les puede añadir algún tipo de texto a las imágenes para explicarlas?

Responder
JMiur  

Es probable pero deberías modificar el script, vaya uno a saber cómo.

Responder
Juanjo  

Hola, JMiur. Hace poco que encontré tu blog y me está apreciendo fabuloso. Desde ya es una magnífica guía práctica de Blogger para nosotros. Somos un equipo de baloncesto de Sevilla que estamos creando un blog del equipo y poco a poco (con mucho esfuerzo y no sin dificultades) estamos añadiendo cosas al blog para que quede lo mejor posible.

Por cierto, mi pregunta es la siguiente, ¿cómo puedo hacer para poner esta galería en una entrada como tú has hecho? Nos serviría de mucho para poder poner una galería en cada artículo que hiciéramos de un partido.

Muchas gracias por todo el trabajo que has aplicado aquí y lo útil que resulta! Un saludo desde España!

Responder
JMiur  

Juanjo:
En este caso, como no tengo jQuery en mi blog, la estoy colocando con un IFRAME, el código, está en una entrada de otro blog auxiliar.

Si se tiene jQuery, no hay problema en colocar todo el CSS y el HTML en una entrada, tal como se haría en la plantilla misma aunque luego, dependiendo de ciertas reglas de estilo que tenga tu sitio, tal vez, habría que hacer algún retoque

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR