[Module] SlideShow in Home page ** Update 09/04/09

[Vassag0]

First apologize for my bad English.

I have made a module for put a SlideShow in your home. Is an alpha version.

This module is based on http://www.gruppo4.c...oss-slide.shtml slideshow code. Is a jquery slide.

I put a text in Spanish for configuration of this module.

Quote

¿Que es lo que hace un slide?
Un slide nos muestra una sucesión de imágenes con un efecto de transición (en este caso un fade). Ademas las imágenes pueden contener vínculos.

¿Como lo instalo?
Descarga el archivo que corresponde al módulo. Ese archivo zip contiene un carpeta con todo lo necesario para tu slide. No debes descargar nada más.
Descomprime esa carpeta en tu tienda dentro de /modules. Debería quedar una ruta como /modules/slide y allí dentro varios archivos y carpetas.
Ahora ves al panel de control del administrador y mira en el apartado modules - tools, allí aparece un modulo llamado Slide 0.1, dale a instalar.
Si ahora recargas la pagina de inicio ya puedes ver, en la parte de abajo, un slide de imágenes.

¿Como se configura?
Siento no poder darte una manera mas fácil... pero estoy hasta el cuello de curro. Pero, vamos por partes.
Ahora vamos a trabajar con los archivos que tenemos en /modules/slide.
En la carpeta css (de /modules/slide) hay un archivo css. Editando ese archivo modificamos el color y las dimensiones de los bordes y slide.
En la carpeta images (de /modules/slide) pondremos las imágenes que queremos mostrar en nuestro slide. Si la imagen tiene unas dimensiones de 500px X 200px son las mismas que tendremos que poner en el css en width (ancho) height (alto).
Ahora tenemos el archivo slide.tpl. Aquí tenemos el script que hace que configura todo el tinglado (al menos en parte). Allí podéis ver las indicaciones para modificar los tiempos de cada imagen y efecto fade.
También aparece una lista de imágenes que usa nuestro slide. Esa lista la deberemos modificar si queremos añadir o cambiar imágenes, también deberemos modificar hacia donde apuntan los vínculos.
Una vez configurado recargamos la página de inicio y ya tenemos el slide con nuestro estilo e imágenes.

Vale tío, pero para el carro que a mi me sale abajo y lo quiero arriba.
Como en cualquier modulo, en prestashop, puedes modificar desde el panel de control, modules, position la posición del modulo. Entre en position y en el apartado home sube el modulo slide hasta dejarlo el primero.

Edit
01/04/2009 Fix a bug.

02/04/2009 Change loading to an animated gif.

09/04/09 Fix compatibility with IE8

Attached File(s)

•  slide.jpg (62bytes)
  Number of downloads: 25152
•  slide.zip (23bytes)
  Number of downloads: 5968

[Vassag0]

.

[Atch]

Muchos Gracias Vassago...

Atch

[Hoodgrown]

Can somebody translate these instructions into English....

I need to know....

1. How to make an image go to a specific URL
2. How to get this to replace the static center image on the home page...

[Hoodgrown]

From 1238766764:

Can somebody translate these instructions into English....

I need to know....

1. How to make an image go to a specific URL
2. How to get this to replace the static center image on the home page...

I figured out #2... but I still need help with #1

[Vassag0]

I'm going try translate the instruction for you... but I'm not sure that I made a fine job with my translation.


How I configure the SlideShow?
In the folder modules/slide/css you have a file .css. Edit the file to change the color, border and dimension of the SlideShow.

In modules/slide you have a file called slide.tpl. With this file you can change the fade times, and a list with the images and url that use our SlideShow.

I'm going put and example for you. Ok, we have a 3 images that we want put in the SlideShow. Well, this images must have the same dimensions (width and height).
We put the images in the modules/slide/images folder. We supuese the name of the images are: image01.jpg, image02.jpg, image03.jpg.
Now edit the slide.tpl. We search this code:

/*ruta de imagenes y vinculo (si se usa)*/
[ 
  { src: 'modules/slide/images/slide_01.jpg', href: 'product.php?id_product=35' }, 
  { src: 'modules/slide/images/slide_02.jpg', href: 'product.php?id_product=60' }
]); 
/*ruta de imagenes y vinculo (si se usa)*/

We change to

/*ruta de imagenes y vinculo (si se usa)*/
[ 
  { src: 'modules/slide/images/image01.jpg', href: 'product.php?id_product=60' }, 
  { src: 'modules/slide/images/image02.jpg', href: 'product.php?id_product=60' },
  { src: 'modules/slide/images/image03.jpg', href: 'product.php?id_product=60' }
]); 
/*ruta de imagenes y vinculo (si se usa)*/

We must write coma "," after all sentences, but not in the last sentence (is an array).
We can put an URL to our shop with href: 'product.php?id_product=60' code.

With this code

/*Configuración de la velocidad de cambio y fundido*/
  sleep: 4, //in sec 
  fade: 2   //in sec 
/*Configuración de la velocidad de cambio y fundido*/

We can change the speed of the fade, and the time that image shows us.

Now, we edit modules/slide/css carrusel.css.

Look this code

#test2 {
    float:left;
    border: 1px solid #BDC2C9; /*ancho, tio y color del borde*/
    width: 511px; /*Mismo ancho que la imagen*/
    height: 238px; /*Mismo alto que la imagen*/
    background:url('../images/loadingAnimation.gif') no-repeat center center;
  }

In width we must type the with our images in pixels. The same with height.

Look this one

  .crea_espacio{
  width: 100%;
  height: 248px; /*Poner 20px mas que la altura de la imagen, para evitar problemas con el homefeature.*/
  margin-bottom: 10px; /*Margen que dejaremos del slide al elemento posterior*/
  }

In some themes, many people have got problems with slide and featured products, when them put the slide on top our your shop.
By not have got problem in height, we can type the same height plus 20 pixels (with 10pixels more too works) that our images have got.

Sorry for my bad English.

[Hoodgrown]

thank you.. instructions worked perfectly..

[calou]

merci beaucoup très beau travail

[shaka]

Hi,

strange thing !

I edit the source code but the href doesn't change...
I delete the cache but i stil have the slide-01.jpg

Second, how to put the slide in the "editorial_block_center", instead of the image ?

Any ideas ?

[Vassag0]

I'm not sure that I stand you. My English is terrible :)


For change the imagen you must save the imagen in modules/slide/images

And in the slide.tpl change this:

src: 'modules/slide/images/slide_01.jpg', href: 'product.php?id_product=35'

This part of code src: 'modules/slide/images/slide_01.jpg, is for a path of our image. This one href: 'product.php?id_product=35' for a URL where we want go.

If the code is correct, the image must be change.

You can clean the smarty compile cache in /tools/smarty/compile. You can delete all files in this folder. Then you open your navigator and press "F5" for refresh the page.

Quote

Second, how to put the slide in the “editorial_block_center”, instead of the image ?

I'm not sure... Do you want put the slide in the top of home page (central_column div)?
You can change the position of the modulo in prestashop's administrator panel, modules, prositions. There, in tools group, search Slide module.

[shaka]

Hi,

It works :)

In fact, i want to put your cool slideshow in the

instead of the default image.

Maybe me in the header.tpl ?

PS Version 1.3.0.10

• Back to top

[shaka]

In fact, it's in the "modules/editorial/editorial.tpl"

But don't know how to call your slideshow instead of the image :

<!-- Module Editorial -->

{if $xml->body->home_logo_link}body->home_logo_link|escape:'htmlall':'UTF-8'}" title="{$xml->body->$title|escape:'htmlall':'UTF-8'|stripslashes}">{/if}
{if $homepage_logo}body->$title|escape:'htmlall':'UTF-8'|stripslashes}" />{/if}
{if $xml->body->home_logo_link}{/if}
{if $xml->body->$logo_subheading}{$xml->body->$logo_subheading|stripslashes}{/if}
{if $xml->body->$title}

{$xml->body->$title|stripslashes}

{/if}
{if $xml->body->$subheading}

{$xml->body->$subheading|stripslashes}

{/if}
{if $xml->body->$paragraph}

{$xml->body->$paragraph|stripslashes}

{/if}

<!-- /Module Editorial -->

[Vassag0]

You can't put this module inside of the editorial module.

But you can change the position of this module, put over the editorial module. Then you edit the editorial options, quite the image.

This way you have in your page the slideshow on top, under the text of the editorial module.

I'm not soure if this is that you want.

[shaka]

It's works !

Just put a margin-top and a margin-left in the carrusel.css

Gracias for this simple, cool slideshow. It's rocks.

[Milton]

Work for me for IE 7 and Firefox 3.0.8, not work IE 8 :sick:

[Vassag0]

I don't test in IE 8. In the next days install IE 8 and test de module.

Sorry for the inconvenience.

[Milton]

Thank You your module is very much useful.

Please que that it also works IE 8 :-)

See You Later.

[Vassag0]

New version. Now work in IE8 ;)

Are you Spanish?

[Ozzy2662]

I like your Slide module very well. Where can I download the fix for IE8?

Thanks,

Osman

[Vassag0]

In the first post. This version is update and works with IE 8.