Foros del Web » Programando para Internet » Jquery »

Armado de Ensalada con Jquery o Css?

Estas en el tema de Armado de Ensalada con Jquery o Css? en el foro de Jquery en Foros del Web. Amigos buenas, tengo una duda de un proyecto que se me asigno y nose como resolverlo, les comento: Tengo una pagina donde los usuarios pueden ...
  #1 (permalink)  
Antiguo 03/12/2013, 15:04
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Armado de Ensalada con Jquery o Css?

Amigos buenas, tengo una duda de un proyecto que se me asigno y nose como resolverlo, les comento:

Tengo una pagina donde los usuarios pueden armar su ensalada a su gusto, ver todo el contenido nutricional de la misma y que se "arme" la ensalada.

tengo el trabajo del contenido hecho:
http://jsfiddle.net/JuJoGuAl/A3z8n/

pero de que manera puedo hacer para que a medida que seleccionen un ingrediente una imagen q represente el ingrediente aparezca y asi poder armar una ensalada?

obvio una imagen no deberia de tapar las otras y asi susecivamente... =s
  #2 (permalink)  
Antiguo 03/12/2013, 15:14
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

Jsfiddle no entiende PHP. Pon HTML, CSS y javasript generado, un ejemplo que funcione.
  #3 (permalink)  
Antiguo 03/12/2013, 15:18
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Respuesta: Armado de Ensalada con Jquery o Css?

Cierto... Ups: http://jsfiddle.net/JuJoGuAl/A3z8n/
  #4 (permalink)  
Antiguo 03/12/2013, 15:52
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

¿Dónde estánlas fotos y dónde tienen que aparecer?
Pon un
Código Javascript:
Ver original
  1. var vegetales={
  2.     lechuga: "http://fotos.com/lechuga.jpg",
  3.     tomate: "http://fotos.com/lechuga.jpg",
  4.     zanahoria; "http://fotos.com/lechuga.jpg"
  5. };

Con todos.
  #5 (permalink)  
Antiguo 03/12/2013, 16:18
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Respuesta: Armado de Ensalada con Jquery o Css?

Las fotos aun no las tengo (como apenas empeze eso hoy) solo quiero saber o tener una idea si hay una libreria de jquery o algun parametro qm permita hacer eso... por los momentos lo que busco es una guia para empezar... (un metodo)
  #6 (permalink)  
Antiguo 03/12/2013, 16:33
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

http://jsfiddle.net/A3z8n/2/

Metí la url en los checbox.
  #7 (permalink)  
Antiguo 03/12/2013, 16:43
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Respuesta: Armado de Ensalada con Jquery o Css?

y con el mismo query puedo hacer que queden una encima de la otra? y hasta cierto punto rotarlas? xq has notado que hay varios ingredientes y la idea es que no tape los que ya estan habilitados... jquery puede hacer eso?
  #8 (permalink)  
Antiguo 03/12/2013, 16:53
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

Pagando lo suficiente, se puede hacer cualquier cosa.
  #9 (permalink)  
Antiguo 03/12/2013, 18:17
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 14 años, 3 meses
Puntos: 3
Respuesta: Armado de Ensalada con Jquery o Css?

Imagino imagenes trasparentes ubicadas con z-index al azar y utilizando algun plugin de jquery para rotar la imagen.

http://www.jquery4u.com/plugins/5-jquery-spinrotate-image-plugins-demos/
  #10 (permalink)  
Antiguo 04/12/2013, 08:37
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Respuesta: Armado de Ensalada con Jquery o Css?

Tambien he pensado (que ya estoy trabajando en ello) en Photoshop armar la ensalada con todos los ingredientes, en la capa IMAGENES poner la ensalada armada con cada imagen (un z-index para cada una) y poner un atributo Display:none, y cada click en cada ingrediente cambiar el display a Block, y al deschequear colocar el Display:none de nuevo...

Creen que es buena idea?


Vuelvo y repito solo estoy recogiendo ideas, no estoy pidiendo que me hagan o me muestren solo necesito unas directivas y yo me encargaria de lo demas... tampoco soy tan inutil
  #11 (permalink)  
Antiguo 04/12/2013, 08:40
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

Es otra alternativa.
  #12 (permalink)  
Antiguo 04/12/2013, 10:19
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 14 años, 3 meses
Puntos: 3
Respuesta: Armado de Ensalada con Jquery o Css?

Este es un ejemplo de lo que digo, seguro que sacas ya algunas ideas para empezarlo :)

Código Javascript:
Ver original
  1. <html>
  2.     <head>
  3.         <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  4.         <script type="text/javascript">
  5.             $(document).ready(function() {
  6.                 //ocultar las imagenes
  7.                 $('.ensalada img').hide();
  8.                 //remover los checkbox seleccionados
  9.                 $('input[type=checkbox]').removeAttr('checked');
  10.                 // al seleccionar los checkbox <input type=checkbox name=*>
  11.                 $('input[type=checkbox][name]').on('click', function(event){
  12.                     //obtenemos el checkbox seleccionado
  13.                     var select = $(this).attr('name');
  14.  
  15.                     //Por cada imagen que haya...
  16.                     $('.ensalada img').each(function() {
  17.                         var imgAlt = $(this).attr('alt');
  18.  
  19.                         // comparamos si coincide con el checkbox seleccionado
  20.                         if (imgAlt == select) {
  21.                             //si esta visible, ocultarlo..
  22.                             if ($(this).is(':visible')) {
  23.                                 $(this).hide();
  24.                             //si esta oculto, mostrarlo..
  25.                             }else{
  26.                                 $(this).show();
  27.                             };
  28.                         };
  29.                     });
  30.                     event.stopPropagation();
  31.                 });
  32.             });
  33.         </script>
  34.         <style type="text/css">
  35.             .ensalada{background-color: blue;width: 100px; height: 100px;margin-left:auto;margin-right:auto;}
  36.             .ensalada img{position: absolute; }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <p>...</p>
  41.         <input type="checkbox" name="queso mozzarella" id="queso mozzarella" value="40,92,6.44,0,18.7,0.52,149.2,105.2,0.08,96.4,0">
  42.         <label>queso mozzarella</label>
  43.         <br>
  44.         <input type="checkbox" name="queso parmesano" id="queso parmesano" value="10,40,2.45,0,9.05,0.13,109,1.26,0.06,25.4,0">
  45.         <label>queso parmesano</label>
  46.         <br>
  47.         <input type="checkbox" name="jamon de pavo" id="jamon de pavo" value="40,41,0.5,0,28,0.04,0,0,0,0,0">
  48.         <label>jamon de pavo</label>
  49.         <p>...</p>
  50.         <br>
  51.         <br>
  52.         <div class="ensalada">
  53.             <img src="#" height="100px" width="100px" alt="queso mozzarella">
  54.             <img src="#" height="100px" width="100px" alt="queso parmesano">
  55.             <img src="#" height="100px" width="100px" alt="jamon de pavo">
  56.         </div>
  57.     </body>
  58. </html>
  #13 (permalink)  
Antiguo 04/12/2013, 11:42
 
Fecha de Ingreso: julio-2013
Mensajes: 34
Antigüedad: 9 años
Puntos: 2
Respuesta: Armado de Ensalada con Jquery o Css?

Yo una vez hice algo "parecido" lo mio era un horario que el dueño del establecimiento modifica el horario para toda la semana y en la web se mostraba abierto o cerrado con una imagen.

mi solución fue php y mysql con if y con case

para lo tuyo yo lo desarrollaría de la siguiente manera:

1ª separas de manera minuciosa todos los ingredientes con algun editor de png
y le pones display none o block con js según estén marcados los check box



2ª haces una foto para cada una de las combinaciones posibles
y con un poco de js o php que calcule cual es la foto que tiene que mostrar.
  #14 (permalink)  
Antiguo 04/12/2013, 12:05
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 5 meses
Puntos: 206
Respuesta: Armado de Ensalada con Jquery o Css?

Tiene 19 ingredientes, así que para seguir tu segunda alternativa, y sabiendo algo de matemática combinatoria básica, debería crear alrededor de diez mil de imágenes, por lo que tendría que echarle muchos cojones.
  #15 (permalink)  
Antiguo 04/12/2013, 14:55
 
Fecha de Ingreso: julio-2013
Mensajes: 34
Antigüedad: 9 años
Puntos: 2
Respuesta: Armado de Ensalada con Jquery o Css?

Cita:
Iniciado por marlanga Ver Mensaje
Tiene 19 ingredientes, así que para seguir tu segunda alternativa, y sabiendo algo de matemática combinatoria básica, debería crear alrededor de diez mil de imágenes, por lo que tendría que echarle muchos cojones.

Ya puede ir empezando
  #16 (permalink)  
Antiguo 18/12/2013, 13:21
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años
Puntos: 19
Respuesta: Armado de Ensalada con Jquery o Css?

Bueno ya lo hice (o medio hice) Cree una ensalada en Photoshop, con cada capa un ingrediente, salve los ingredientes como PNG, y cree una capa (DIV) con un z-index para cada ingrediente. y pues todo va funcionando bien...

Etiquetas: armado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:23.