Cómo poner un carrusel de imágenes con Jquery para Prestashop

9 mayo, 2013 Estrategia y Consultoría No hay comentarios
0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

jquery_prestashop

Hay dos formas de realizar un carrusel de imágenes, programarlo desde cero o partiendo de uno ya hecho y modificarlo a nuestro gusto.

Si encontramos un carrusel que haga más o menos la misma función que necesitamos, lo mejor es optar por la segunda opción.

Para ello empezamos descargando un carrusel. Os pongo un enlace donde podéis descargar el mismo con el que voy a hacer el ejemplo.

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php

Hay que descargarse el paquete de js, donde los colocaremos en la carpeta js del prestashop.

Primero entrar aquí y copiar el código y pegarlo en un archivo js.

Segundo, en el header tpl llamar al js anterior y al de jquery.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/nombre_del_js_creado.js></script>

El siguiente paso después de incluir los archivos js, es incluir en el header.tpl este código:

<script type="text/javascript">

 $("document").ready(function({
   $("#foo1").carouFredSel({
      items: 1,
      auto : true,
      prev : "#foo1_prev",
      next : "#foo1_next"
 });
});
</script>

Después añadiremos este HTML donde queramos que aparezca el carrusel.

<div class="image_carousel">
<div id="foo1">
<img src="prueba1"  alt="prueba1" width="140" height="140" />
<img src="prueba2"  alt="prueba2" width="140" height="140" />
</div>
<div class="clearfix"></div>
<a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
<a class="next" id="foo1_next" href="#"><span>next</span></a>
</div>

Y en el global.css añadir estos estilos:

.image_carousel {
 padding: 15px 0 15px 40px;
 position: relative;
}
.image_carousel img {
 border: 1px solid #ccc;
 background-color: white;
 padding: 9px;
 margin: 7px;
 display: block;
 float: left;
}
a.prev, a.next {
 background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
 width: 45px;
 height: 50px;
 display: block;
 position: absolute;
 top: 85px;
}
a.prev { left: -22px;
 background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.next { right: -22px;
 background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.prev span, a.next span {
 display: none;
}
.clearfix {
 float: none;
 clear: both;
}

Con esto ya el carrusel empezará a funcionar.

Todo ya depende de los efectos que quieras cambiar y estilos.

Para los efectos puedes guiarte por este enlace:

http://docs.dev7studios.com/caroufredsel-old/custom-events.php

0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×
Agencia Diseño Web 360 Okisam - Marketing online Valencia

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia