Carrusel con limite en Liferay

De Dos Ideas.
Saltar a: navegación, buscar

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.

Obtenido de «https://dosideas.com/wiki/index.php?title=Carrusel_con_limite_en_Liferay&oldid=6876»