slideshow en la home

Viendo esta tienda, he decidido hacerme mi propio slideshow.
En el foro americano he encontrado este hilo donde el trabajo ya estaba casi todo hecho, solo he cambiado la disposición de las divs, colocandolas encima una de otras gracias a la propiedad css z-index, y he añadido una pequeña función para que el slideshow se pare cuando el ratón pasa encima.
Gracias a script.aculo.us (que viene ya instalado con Magento) es realmente muy facil conseguir unos efectos muy chulos.

Entonces, para tener un slideshow en la home, primero vamos a crear un bloque estático: CMS->Bloques Estáticos->Agregar un nuevo bloque. Le damos un nombre y un identificador, lo habilitamos y en el campo Contenido de la pestaña Información general añadimos un poco de JavaScript:

    <script type="text/javascript">
        start_slideshow(1, 3, 3000);
        function start_slideshow(start_frame, end_frame, delay) {
            id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
        }
        function switch_slides(frame, start_frame, end_frame, delay) {
            return (function() {
                Effect.Fade('slide' + frame, { duration: 1.0 });
                if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
                Effect.Appear('slide' + frame, { duration: 1.0 });
                if (delay == 1000) { delay = 3000; }
                id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
            })
        }
        function stop_slideshow() {
            clearTimeout(id);
        }
    </script>

 

y el contenido html con las divs y sus imagenes linkeadas:

	<div id="introhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)">
		<div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><a href='http://www.yourdomain.com/path/to/webpage1.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
		<div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage2.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
		<div id="slide3" class="slide"style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage3.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
	</div>

Ahora solo queda incluir este bloque donde queramos, en este caso la homepage, vamos a editarla: CMS->Gestionar las páginas->HomePage y en el campo Contenido de la pestaña Información general añadimos:

{{block type="cms/block" block_id="el_identificador" template="cms/content.phtml"}}

Esta claro que hay que adaptar los enlaces y las rutas a las imagenes (estas imagenes tienen que estar en /skin/frontend/default/tutema/images/).