Document Actions
Liferay - Slideshow con jquery y cycle
Como implementar un slideshow de fotos con liferay, jQuery y el plugin cycle
Esto funciona con Liferay 5.2.3
- Bajar plugin cycle para jQuery 1.2.6 http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.js
- Instalar el plugin en el directorio del SDK para plugins
de Liferay /themes/nombre-del-theme/docroot/diff/javascript/ e instalar el
tema en liferay
- Verificar que se instaló bien probar
http://localhost:8080/nombre-del-theme/javascript/jquery.cycle.lite.1.0.js
debe devolver el fuente javascript del plugin instalado.
- Crear la Estructura (esta copiada abajo)
- Crear la Plantilla (esta copiada abajo)
- Asignar la estructura a la plantilla creada.
- Modificar en la plantilla el atributo src del tag script con el valor /nombre-del-theme/javascript/jquery.cycle.lite.1.0.js , probado en el item 3, quedando asi: <script type="text/javascript" src="/nombre-del-theme/javascript/jquery.cycle.lite.1.0.js"></script>
Estructura
<root>
<dynamic-element name='imagen' type='image_gallery' repeatable='true'>
<dynamic-element name='titulo' type='text' repeatable='false'></dynamic-element>
</dynamic-element>
<dynamic-element name='ancho' type='text' repeatable='false'></dynamic-element>
<dynamic-element name='alto' type='text' repeatable='false'></dynamic-element>
</root>
Plantilla
<style type="text/css">
table { margin: auto; border-collapse: separate; border-spacing: 0px }
td { vertical-align: top; text-align:center; width: $ancho.getData()px }
hr { margin-top: 20px; }
.pics { height: $alto.getData()px; width: $ancho.getData()px; padding:0; margin:0; overflow: hidden }
.pics img { height: $alto.getData()px; width: $ancho.getData()px; padding: opx; border: 0px ; top:0; left:0 }
</style>
<script type="text/javascript" src="/html/js/jquery/jquery.cycle.lite.1.0.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#slideshow3').cycle({ delay: 2000, speed: 500 });
});
</script>
<div id="demos">
<table>
<tbody>
<tr>
<td>
<div class="pics" id="slideshow3">
#foreach( $imagen_item in $imagen.getSiblings() )
<img width="$ancho.data" height="$alto.data" src="$imagen_item.data" alt="$imagen_item.titulo.data" />
#end
</td>
</tr>
</tbody>
</table>
</div>
