Esta semana encontré una manera fácil de tener una foto galería con jQuery. Se puede checar en este tema de themeforest y en este tutorial les mostrare como implementarlo.
La librería que se utiliza se llama jquery.innerfade y se puede encontrar la documentación en esta pagina con toda su documentación y una vez que tenemos esto implementarlo es bastante sencillo.
Necesitamos como primer paso incluir jQuery de una de las múltiples maneras posibles. En este caso lo tendremos en el folder “js”, que es el mismo folder en el que tendremos esta librería. Pondremos 2 scripts en nuestro header:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
Después necesitamos tener en nuestro html la siguiente estructura con las distintas imágenes que deseamos utilizar:
<ul id="slider">
<li><img src="images/justo.png"></li>
<li><img src="images/justo2.png"></li>
<li><img src="images/justo3.png"></li>
</ul>
Ahora solo falta inicializar el efecto que lo haremos con el siguiente código:
<script>
$(document).ready(function(){
$('#slider').innerfade({
animationtype: 'slide',
speed: 2000,
timeout: 5000,
type: 'random',
containerheight: '1em'
})
});
</script>
Un poco de estilo después y tenemos una página como esta. Que pueden descargar toda la aquí. Les deseo suerte usando este tipo de librerías y recomiéndenme las que encuentren en línea.
Related posts: