Diferencia entre revisiones de «Carrusel con limite en Liferay»
| Línea 1: | Línea 1: | ||
| + | == Introducción== | ||
| + | |||
| + | Un carrusel de imagenes personalizable para [[Liferay Portal]] con soporte para IE7+/Firefox/Chrome. | ||
| + | Los aspectos personalizables son: | ||
| + | * La cantidad maxima de imagenes a mostrar. | ||
| + | * El intervalo de tiempo de transicion entre imagenes. | ||
| + | * La carga de imagenes con o sin link. | ||
| + | |||
| + | |||
== Implementación == | == Implementación == | ||
Revisión actual del 14:39 2 ago 2013
Introducción
Un carrusel de imagenes personalizable para Liferay Portal con soporte para IE7+/Firefox/Chrome. Los aspectos personalizables son:
- La cantidad maxima de imagenes a mostrar.
- El intervalo de tiempo de transicion entre imagenes.
- La carga de imagenes con o sin link.
Implementación
Utilizamos una estructura y template de Liferay. La estructura es un archivo XML y el template es un archivo velocity. La estructura es la que define los campos que necesita el web content para crearse. Luego el template de velocity renderiza la estructura mencionada anteriormente. Para implementarlo utilizamos como base el carrusel que provee Bootstrap. Dicho carrusel se caracteriza por ser responsive. Para que además sea compatible con IE7+, utilizamos la libreria "respond.js" y algunos meta-tags html. El head debe tener lo siguiente:
<head> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" media="screen" /> <meta http-equiv="X-UA-Compatible" content="IE=8"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <script src='js/lib/jquery-1.10.1.min.js' type='text/javascript'> </script> <script src='js/lib/bootstrap.min.js' type='text/javascript' > </script> <script src='js/lib/respond.min.js' type='text/javascript' > </script> </head>
Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap.
Además, para que el estilo "Opacity" sea soportado por IE7+, utilizamos el estilo: Alpha(Opacity=100). Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%:
div{
filter: Alpha(Opacity=50);
opacity: 0.5;
}
Para que se puedan cargar varios carruseles en la misma página, el id identificador de cada instancia esta representado por el id de la estructura(ej: "carrusel"), y por el titulo del web-content (ej:"web-content-1"), siendo el id resultante "carrusel-web-content-1". Esto convierte a cada instancia del carrusel en única siempre y cuando los titulos de los web-content sean diferentes.
