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">‹</a> <a href="#" class="jcarousel-control-next">›</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.
