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ónValor default
perPagecantidad de elementos a mostrar4
itemClassClase utilizada para acceder al contenido de imágenesitem
mode(horizontal ó vertical)horizontal
autoHeightAjuste de paginaciónfalse
coverWhen set to true, the plugin will consider the first page as a cover and will consider it as one itemfalse
easingAnimaciónswing
durationDuración para el slider600
animateFunctionPuedes agregar una función cuando la galería cambie de imagennull

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.

 

Contenido relacionado: