28 mayo 2014
Category:
Programacion
Comments:

Galería de imagenes con Modernizr

A continuación  haremos una galería de imágenes usando Modernizr

1.- Primero describiremos brevemente que es Modernizr y para que lo podemos usar

Modernizr es una librería JavaScript que nos permite reconocer la compatibilidad de los navegadores con tecnologías HTML5 y CSS3, lo que nos permitirá desarrollar sitios web modernos, de interfaces limpia y dinámica.

Este framework filtra las capacidades de un navegador relativas a HTML5 y CSS3, en resumen es una librería JavaScript que nos informará cuáles de las funcionalidades de estas tecnologías están disponibles en el navegador del usuario, para utilizarlas, o no, en cada caso.

2.- Descargamos Modernizr

3.- Añadimos las siguientes lineas a nuestro index.html entre las etiquetas <head></head>

<head>
<meta charset="utf-8">
<title>Galería de imágenes  - jCarousel </title>
<!-- Carpeta Shared assets -->
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<!-- Carpeta Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.basic.css">
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.basic.js"></script>
</head>

4.- Dentro de las etiquetas <body></body>

<body>
<div class="wrapper">
<h1>Basic carousel</h1>
<p>Este ejemplo se muestra la configuracion basica de un carrusel con controles prev/next y paginacion.</p>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Fotos de Marc Wiegelmann</a>
</p>
<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
<a href="#" class="jcarousel-control-next">&rsaquo;</a>
<p class="jcarousel-pagination">
</p>
</div>
</div>
</body>

5.- Hecho todos los pasos nos debería de quedar así:

También podemos modificar los estilos a nuestro criterio.

carruselbasico

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

×
Hola. Mi nombre es Roxana. Atendemos su consulta inmediatamente