SilverTrack para una galería de imagenes

DESCARGA : SilverTrack

SilverTrack para una galería de imágenes, si eres de los que les gusta variar en la presentación de imágenes puede interesarte este plugin, que es muy sencilla de implementar en tu sitio, su principal ventaja es que es extendible y es compatible con otros plugins.

 

1.- Tiene un pequeño núcleo y viene con plugins muy útiles.

2.- Puedes armar tú galería horizontal

3.- Pudes armar tú galería vertical.

4.- entre los elementos(imágenes) puedes poner texto alternativo e intercalar la información.

5.- Puedes crear muchas galerías sin ningún conflicto.

Demostración: http://tulios.github.io/jquery.silver_track/

Puedes observar claramente las opciones que este plugin puede manejar

Nombre
Descripción Valor default
perPage cantidad de elementos a mostrar 4
itemClass Clase utilizada para acceder al contenido de imágenes item
mode (horizontal ó vertical) horizontal
autoHeight Ajuste de paginación false
cover When set to true, the plugin will consider the first page as a cover and will consider it as one item false
easing Animación swing
duration Duración para el slider 600
animateFunction Puedes agregar una función cuando la galería cambie de imagen null

Ejemplo 1:

 

Ejemplo 2

 

El uso como se indica en el enlace del plugin e sencillo ya que trabaja con las referencias en los atributos id

Código html


<div class="track my-track">

<!-- SilverTrack requires only this part -->
 <div class="view-port">
 <div class="slider-container">
 <div class="item"><img src="http://lorempixel.com/230/134/nature/1/"></div>
 <div class="item"><img src="http://lorempixel.com/230/134/nature/2/"></div>
 <!-- ... -->
 </div>
 </div>

<!-- My custom navigator links -->
 <div class="pagination">
 <a href="#" class="prev disabled"></a>
 <a href="#" class="next disabled"></a>
 </div>

</div>

Código Css


.view-port {
 width: 960px;
 overflow: hidden;
 position: relative;
}
.slider-container {
 position: relative;
 height: 138px;
 margin: 0;
 padding: 0;
}
.item {
 position: absolute;
 width: 234px;
 height: 138px;
 margin-right: 8px
}

Código javascript


var container = $(".my-track");
var track = container.find(".slider-container").silverTrack();

// install the plugins you want, in our case Navigator
track.install(new SilverTrack.Plugins.Navigator({
 prev: $("a.prev", container),
 next: $("a.next", container)
}));

track.start();

 

 

Sin duda muy buen plugin para el manejo de tus imágenes.

 

Información relacionada: