Imprimir Página - Cambiar la imagen de pendiendo la seleccionada

Título: Cambiar la imagen de pendiendo la seleccionada
Publicado por: Antoniio en 5 Agosto 2017, 22:31 pm

Hola, buenas tardes. Tengo este sistema de cotización que encontré en internet:
http://cotizadorweb.com.mx/

Pero me gustaría saber cómo hago para abajo de la imagen del producto aparezcan varios colores (en imagen) y cuando se seleccione uno, la imagen de arriba cambie con el color seleccionado:
(http://i.imgur.com/WHnKVeo.png)

Algo así que si pone alfombra y selecciona el color rojo, cambie la imagen con una alfombra roja, y así para el resto, algo como lo que se hace aquí: http://www.persianasfarz.com/producto.php?prodId=16&cate=Enrollable

Supongo que es como esto:

Código:

 function sel_estilo(value) //lo que pasa cuando se selecciona un estilo
  {
    $('#rango').val('').change();
    var select=document.getElementById("rango");
    var op=select.getElementsByTagName("option");

    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Trafico'){
      for (var i = 1; i < 3; i++) op[i].style.display="block";
      for (var i = 3; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Residencial'){
      $("#msg-pedido").modal({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).modal( "close" );
            }
        }
      });
      for (var i = 1; i < 3; i++) op[i].style.display="none";
      for (var i = 3; i < 10; i++) op[i].style.display="block";
      for (var i = 10; i < op.length; i++) op[i].style.display="none";
    
    }else if(value=='7mm'){
      for (var i = 1; i < 12; i++) op[i].style.display="none";
      for (var i = 12; i < 14; i++) op[i].style.display="block";
      for (var i = 14; i < op.length; i++) op[i].style.display="none";
    }else if(value=='8mm'){
      for (var i = 1; i < 14; i++) op[i].style.display="none";
      for (var i = 14; i < 16; i++) op[i].style.display="block";
      for (var i = 16; i < op.length; i++) op[i].style.display="none";
    }else if(value=='10mm'){
      for (var i = 1; i < 16; i++) op[i].style.display="none";
      for (var i = 16; i < 18; i++) op[i].style.display="block";
      for (var i = 18; i < op.length; i++) op[i].style.display="none";

    }else if(value=='12mm'){
      for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????

    }else if(value=='Rollet'){

    }else if(value=='Wollet'){

    }else if(value=='Panellet'){

    }else if(value=='Aluminix'){

    }
  }

Pero no se como hacer para aplicarlo ahora con colores y hacer que vaya cambiando la imagen...

Un saludo !!.

Título: Re: Cambiar la imagen de pendiendo la seleccionada
Publicado por: xiruko en 5 Agosto 2017, 23:43 pm

Hola, te doy una idea básica de cómo se haría con JQuery:

HTML imagen:

Código

<img id='foto' src='default.jpg'>

Supongamos que las fotos de las alfombras en varios colores se llaman asi:
alfombra1_negra.jpg
alfombra1_roja.jpg
etc.

HTML select:

Código

<select id="estilo">
   <option value='negra'>Negro</option>
   <option value='roja'>Rojo</option>
</select>

JS:

Código

$('#estilo').on('change', function() {
   var value = $(this).val();
   $('#foto').attr('src', 'alfombra1_' + value + '.jpg');
});

Espero que te dé una idea de cómo adaptarlo a tus necesidades.

Saludos!

Título: Re: Cambiar la imagen de pendiendo la seleccionada
Publicado por: Antoniio en 10 Agosto 2017, 01:09 am

Hola, gracias por responder. El problema es que son varios los productos que se seleccionan, y se tiene que hacer para cada uno de pendiendo cuál está seleccionado, este es: https://pastebin.com/kSJb4W76
cómo podría aplicarlo con distintos productos?

Intenté hacerlo, quedó así:
https://pastebin.com/MgzWEi45

Pero me marca error en la línea 48, alguna sugerencia?

Exactamente esto quiero: https://jsfiddle.net/3bL3y03g/2/

Quiero juntarlo a este: https://pastebin.com/q1CLJQfp que vendría siendo este: http://cotizadorweb.com.mx/ para cuando se elija un producto aparezca debajo de su imagen el color, pero no puedo juntarlos..

Mod: No hacer triple post. Existe el boton "Modificar"

Título: Re: Cambiar la imagen de pendiendo la seleccionada
Publicado por: engel lex en 26 Agosto 2017, 08:30 am

linea 46

Código

  <?php <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg" class="imagen">

no existe <img dentro de php

no se si te sirve, no leí casi el tema...

mi recomendación.... llama js directamente con los valores

Código

<div class="rojo" onclick="cambiar_imagen('/imagen_para_color_rojo.jpg');" >color rojo</div>

y en js

Código

cambiar_imagen(src){
 $("#muestra").attr("src",src);
}

requiere más código en php, pero el código es más simple

Título: Re: Cambiar la imagen de pendiendo la seleccionada
Publicado por: Antoniio en 26 Agosto 2017, 18:43 pm

El js lo debo incluir ahí mismo debajo del la imagen del color rojo? O como son varios productos debe ser después de cada"if($('.producto'')=='producto') "?

Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: Antoniio en 5 Agosto 2017, 22:31 pm