:: CP - Recursos Web :: - Touch Image Gallery

Touch Image Gallery

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Touch Image Gallery

Fecha:

Creditos: http://dynamicdrive.com

Diseño para: Galerias

Garantia: SI ?

Descripción:

Touch Image Gallery es una genial galería que permite mostrar tus imágenes de una forma muy elegante, mediante el efecto Slide manejas las imágenes cambiándolas con un click.

- Codigo 01: Por encima de la pagina o extra head:

<style>.touchgallery{position: relative;overflow: hidden;width: 350px;height: 270px;}
.touchgallery ul{list-style: none;margin: 0;padding: 0;left: 0;position: absolute;
-moz-transition: all 100ms ease-in-out;
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;}
.touchgallery ul li{float: left;display: block;text-align: center;}
.touchgallery ul li img{ max-width:100%;height:auto;}
.touchgallery .jumptodiv{text-align: center;width: 100%;background: white;font-size: 1.5em;font-weight: bold;
color: black;letter-spacing: 7px;position:absolute;bottom: 0;margin-top: 0;text-shadow: 0 1px 2px #8a8a8a;}
.touchgallery .jumptodiv span.selected{color: darkred;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/qlbumzteboza5g2/jquery.touchSwipe.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/aqdv82ckar0609e/touchgallery.js"></script><script>
jQuery(function(){ // on DOM load
$('div#touchgallery2').touchgallery({  // initialize second demo
			width: 400,
			height: 300
})})
</script>

Copiar codigo

- Codigo 02: Donde quieras que aparezca:

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

Descargar

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Edita las imágenes del segundo script, trata de que todas las imágenes tengan el mismo tamaño, si más grandes modifica el segundo Script donde dice "width" y "height".
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 151 visitantesGracias por tu visita!

Recomendamos:

| CERRAR