horinaja-header

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

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT