Carrusel con limite en Liferay

De Dos Ideas.
Revisión del 15:50 17 jul 2013 de Maro (discusión | contribuciones) (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…')
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

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.


Por que? 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.