Noobslide es un script que nos permite crear una exelente galería de imagenes o slideshow, con la ventaja de que carga muy rápido y tiene varios ejemplos para elegir.
En esta ocación voy a explicar como instalar la primer galería que da como ejemplo el autor del script, que es el mas simple y práctico.
En esta ocación voy a explicar como instalar la primer galería que da como ejemplo el autor del script, que es el mas simple y práctico.
Lo primero que hacemos es bajar los archivos que se encuentran en un archivo ZIP. Tiene los archivos para la galería y los ejemplos.
Luego, subimos los archivos a nuestro servidor, yo use un servidor de hosting gratuito, ustedes pueden hacerlo así también, la otra opción es subirlo a Goegle Pages, pero recuerden que cerrará a fin de este año 2008.
Una vez subidos los archivos al servidor debemos crear la llamada para colocar debajo de ]]></b:skin> :
Código:
<link href='http://iggna.net78.net/scripts/noobSlide/style.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://iggna.net78.net/scripts/noobSlide/_mootools.js' type='text/javascript'/>
<script src='http://iggna.net78.net/scripts/noobSlide/_class.noobSlide.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready',function(){
var hs1 = new noobSlide({
box: $('box1'),
items: [1,2,3,4],
size: 480,
autoPlay: true
});
})
</script>
Luego, vamos "Diseño" y agregamos un nuevo elemento HTML, donde insertamos el siguiente código:
<h2>Slideshow</h2>
<div class="sample">
<div class="mask1">
<div id="box1">
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span>
<span><img alt="Photo" src="URL DE LA IMAGEN"/></span></div></div></div>
Y listo, si todo está bien debería funcionar sin problemas! Aquí pudes verlo en funcionamiento en Blogger. Ver Demo.
Entradas
