En este blog he escrito sobre varios recursos que los programadores podemos utilizar para crear galerías de imágenes y presentaciones. Hoy les voy a presentar un script muy flexible también para crear presentaciones que es muy sencillo de implementar.
Horinaja es un Javascript que permite crear un slideshow completamente personalizable y que además, permite usar indistintamente la versión que utiliza la biblioteca jQuery o la que usa Scriptaculous.
Implementación
Para jQuery:
<script src='jquery.mousewheel.js' type="text/javascript"></script>
<script src='path_to_your_js/class.horinaja.jquery.js' type='text/javascript'></script>
<link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />
Para Scriptaculous:
<script src='path_to_your_js/class.horinaja.scriptaculous.js' type='text/javascript'></script>
<link rel="stylesheet" href="path_to_your_css/horinaja.css" type="text/css" media="screen" />
HTML para implementar el slideshow:
<div id="demo">
<ul>
<li><!-- content 1 --></li>
<li><!-- content 2 --></li>
...
</ul>
</div>
Inicializar el script:
Para jQuery:
<script>
$(document).ready(function(){
$('#demo').Horinaja({
capture:'demo',delai:0.3,
duree:4,pagination:true});
});
</script>
Para Scriptaculous:
<script>
document.observe("dom:loaded", function() {
new Horinaja('demo',0.3,4,true);
});
</script>
Opciones para programar el comportamiento:
Con los siguientes códigos se pueden definir tiempos, paginación, etc.
Para jQuery:
$(div#id).Horinaja({capture:id,delai:0.3,duree:4,pagination:true});
Para Scriptaculous:
new Horinaja(id,force,delai,pagination);
Horinaja
Web: www.davidmassiani.com/horinaja
Vía: www.feedmyapp.com