Ampliar/lightbox las texturas de los atributos de color

[matutano]

Hola, tengo una web en la que tengo que poner texturas en los atributos de color pero estas salen muy pequeñas y realmente no se aprecian las texturas, existe algún módulo o algo para que al pulsar sobre una textura esta se amplíe o aparezca en forma de lightbox, muchas gracias.

 

Saludos.

[ventura]

Puedes ampliarlas mediante css, 

 

http://codepen.io/antonio-ventura/pen/ByyRVR

[matutano]

Hola Ventura, no soy programador por lo que se por donde empezar, tengo alguna idea de CSS, me puedes indicar como puedo hacerlo?, gracias por responder llevo dos horas buscando información sobre esto y no hay nada por internet y creo que es algo que deberia de existir en prestashop de base. Saludos.

[ventura]

Mediante css puedes hacer un efecto asi

http://loni.esy.es/index.php?id_product=5&controller=product

 

Pon direccion de tu web o dime si utilizas la plantilla default

[matutano]

Hola Ventura, la web es http://vittello.com/tiendavittello/sofa-3-plazas-chaisse-longue/9-sofa-parthenon-3-plazas-chaisse-longue.html como verás en este producto existen atributos de color/textura, la plantilla es una de leotheme, muchas gracias de nuevo

[ventura]

En el archivo 

/themes/tu_tema/css/product.css

Busca esta parte

#attributes .attribute_list #color_to_pick_list li a.color_pick {
cursor: pointer;
 display: block;
  height: 22px;
width: 22px;
}

Y sustituyelo por esto

 #attributes .attribute_list #color_to_pick_list li a.color_pick {
 display: block;
 height: 22px;
 width: 22px;
cursor: pointer;
transform: scale(1);
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1); 
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(1); 
 -moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
z-index: -1;
}
#attributes .attribute_list #color_to_pick_list li a.color_pick:hover {
 transform: scale(2.5);
-webkit-transition: all 200ms ease-in;
 -webkit-transform: scale(2.5); 
-ms-transition: all 200ms ease-in;
 -ms-transform: scale(2.5); 
-moz-transition: all 200ms ease-in;
-moz-transform: scale(2.5);
 transition: all 200ms ease-in;
 z-index: 20;
position:relative
}

Edited November 20, 2014 by ventura (see edit history)

[matutano]

Ha funcionado a la primera! Muchas gracias Ventura eres un genio! yo lo veo todo negro cuando tengo que hacer un cambio de estos y tu lo ves a la primera

 

Por cierto tengo otra pregunta, como puedo hacer para que al hacer una selección de un tipo de tejido en un desplegable (un atributo) solo te muestre los colores que están disponibles en dicho tejido, en vez de que aparezcan todos los colores y si seleccionas un color que no pertenece a ese tejido te muestre el mensaje: Este producto no existe en este modelo.

 

Gracias!!!

Edited November 20, 2014 by matutano (see edit history)

[kine]

Me ha venido de maravilla ventura! Mil gracias!

[homerjotasimpsons]

Hola,

 

Ante todo gracias por dar luz a muchas dudas que tenemos. Yo estoy empezando en esto y me sirve mucho.

 

Yo he hecho lo de ampliar la imagen de los atributos. Y me ha ido bien, pero solo en el navegador google chrome.

 

En internet exlporer no se ven las imagenes de los atributos, ni las imagenes originales.

 

Me podeis ayudar???

 

Gracias

[ventura]

Prueba asi

  #attributes .attribute_list #color_to_pick_list li a.color_pick {
        display: block;
        height: 22px;
        width: 22px;
        cursor: pointer; 
}
#attributes .attribute_list #color_to_pick_list li a.color_pick:hover {
    transform: scale(2.5);
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(2.5); 
    -ms-transform: scale(2.5); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(2.5);
    z-index: 20;


}

[kine]

 

Prueba asi

  #attributes .attribute_list #color_to_pick_list li a.color_pick {
        display: block;
        height: 22px;
        width: 22px;
        cursor: pointer; 
}
#attributes .attribute_list #color_to_pick_list li a.color_pick:hover {
    transform: scale(2.5);
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(2.5); 
    -ms-transform: scale(2.5); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(2.5);
    z-index: 20;


}

 

 

Así funciona perfecto en todos los navegadores!! Muchas gracias!!

[homerjotasimpsons]

Muchisimas gracias.

 

Me ha funcionado perfecto. Como decimos por Andalucia. Me quito el sombrero¡¡¡¡¡

[Ribeiro-Ribs]

Ha funcionado a la primera! Muchas gracias Ventura eres un genio! yo lo veo todo negro cuando tengo que hacer un cambio de estos y tu lo ves a la primera

 

Por cierto tengo otra pregunta, como puedo hacer para que al hacer una selección de un tipo de tejido en un desplegable (un atributo) solo te muestre los colores que están disponibles en dicho tejido, en vez de que aparezcan todos los colores y si seleccionas un color que no pertenece a ese tejido te muestre el mensaje: Este producto no existe en este modelo.

 

Gracias!!!

Bueno, no sé si entiendo su pregunta, pero creo o grupos de colores de muestra: Color-01_07 Color-02_05 Color-03_12 Y en la mezcla de productos que seleccione el grupo de colores que desee para que coincida con ese grupo de productos que utilizan esos colores .

Espero haber ayudado,

Abs.

[chenler19]

Buenas, lo he probado y todo parecia funcionar correctamente hasta que un par de clientes me dijeron que no podía cambiar los colores. Y parece ser que es por el navegador firefox, me lo he descargado y todo me funciona bien en internet explorer, chrome y moviles, pero en firefox no funciona, sale en blanco los atributos y no se pueden elegir.

Alguien tendría una respuesta?¿?

Gracias de antemano.

[prestadix]

 

Prueba asi

  #attributes .attribute_list #color_to_pick_list li a.color_pick {
        display: block;
        height: 22px;
        width: 22px;
        cursor: pointer; 
}
#attributes .attribute_list #color_to_pick_list li a.color_pick:hover {
    transform: scale(2.5);
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(2.5); 
    -ms-transform: scale(2.5); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(2.5);
    z-index: 20;


}

Olá, muito obrigado. Isto também serviu para mim.

Funciona muito bem, no entanto as imagens aumentam por cima da palete ocultando as outras imagens e, assim é mais difícil de selecionar outras escolhas.

Como posso fazer com que as imagens apareçam deslocadas por cima do quadrado onde está o rato selecionado?

[Natima]

Hola! me podriais decir en que carpeta encuentro esto en el prestashop version 1.7.4?