Diferencia entre revisiones de «Carrusel con limite en Liferay»

De Dos Ideas.
Saltar a: navegación, buscar
(Implementación)
 
(No se muestran 4 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
== Descripción ==
+
== Introducción==
 
 
Un carrusel de imagenes personalizable para Liferay con soporte para IE7+/Firefox/Chrome.
 
Los aspectos personalizables son:
 
  
 +
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.
 
* La cantidad maxima de imagenes a mostrar.
 
* El intervalo de tiempo de transicion entre imagenes.
 
* El intervalo de tiempo de transicion entre imagenes.
 
* La carga de imagenes con o sin link.
 
* La carga de imagenes con o sin link.
+
 
  
 
== Implementación ==
 
== Implementación ==
Línea 40: Línea 39:
 
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
 
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.
 
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.
 

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.