Diferencia entre revisiones de «Carrusel con limite en Liferay»
(Página creada con '== Descripción == Un carrusel de imagenes personalizable para Liferay con soporte para IE7+/Firefox/Chrome. Los aspectos personalizables son: * La cantidad maxima de imagene…') |
(→Implementación) |
||
| Línea 26: | Línea 26: | ||
<script src='js/lib/respond.min.js' type='text/javascript' > </script> | <script src='js/lib/respond.min.js' type='text/javascript' > </script> | ||
</head> | </head> | ||
| − | |||
Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap. | 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). | 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%: | Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%: | ||
| Línea 44: | Línea 42: | ||
| − | + | == Conclusión == | |
En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives | En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives | ||
(ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar. | (ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar. | ||
Al encontrar la libreria respond.js, tomamos la alternativa del carrusel de bootstrap ya que puede ser soportado por IE7+, responsive y es facilmente personalizable. | Al encontrar la libreria respond.js, tomamos la alternativa del carrusel de bootstrap ya que puede ser soportado por IE7+, responsive y es facilmente personalizable. | ||
Revisión del 15:54 17 jul 2013
Descripción
Un carrusel de imagenes personalizable para Liferay 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.
Conclusión
En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives (ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar. Al encontrar la libreria respond.js, tomamos la alternativa del carrusel de bootstrap ya que puede ser soportado por IE7+, responsive y es facilmente personalizable.
