Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Jquery (http://www.forosdelweb.com/f179/)
-   -   Pasar variable a ventana modal jquery (http://www.forosdelweb.com/f179/pasar-variable-ventana-modal-jquery-988736/)

arqrym 22/04/2012 14:29
Pasar variable a ventana modal jquery
 
Hola buenas..

Estoy realizando una página en la que muestro un detalle del producto, pero para ver todas las imágenes del producto lanzo una ventana modal con jquery, pero el problema es que no soy capaz de pasarle la variable a la ventana modal para que me recupere la ruta de las imágenes, ya que la carpeta va en función de la id del producto..

Mediante un script de javascript sí he sido capaz de realizarlo, pero estaba probando con jquery ui y mi desconocimiento es bastaste alto..

Desearía una orientación de cómo pasar la variable ..

He buscado bastante y no he sido capaz de conseguirlo..

Muchas gracias de antemano...

Naahuel 22/04/2012 20:22
Respuesta: Pasar variable a ventana modal jquery
 
Pues sin código de cómo estás realizando la ventana o tu enmarcado HTML, difícil poder ayudar.

arqrym 23/04/2012 02:04
Respuesta: Pasar variable a ventana modal jquery
 
Cita:
Iniciado por Naahuel (Mensaje 4171532)
Pues sin código de cómo estás realizando la ventana o tu enmarcado HTML, difícil poder ayudar.
Perdona pero no estaba en el pc..Te la pongo ahora..

Código:
<script type="text/javascript">
               
                $(document).ready(function() {
                $('#dialog_link').click(function(){
                $('#imgprod').dialog('open');
                                                return false;
                        });
                               
                                $('#imgprod').dialog({
                                        autoOpen: false,
                                        width: 500,
                                        height: 500,
                                        show: 'fade',
                          hide: 'fade',
                                      modal: true,
                                        buttons: {
                                                "Ok": function() {
                                                        $(this).dialog("close");
                                                },
                                                "Cancel": function() {
                                                        $(this).dialog("close");
                                                }
                                        }
                                       
                                });
               
               
                });

</script>

Código HTML:
<a href="#" id="dialog_link" >Fotos</a>
El enlace de fotos me abre la ventana modal del div (imgprod) y en ella quería recuperar la id del producto para mostrar todas las fotos de dicho producto. La imagen tiene una ruta con la carpeta correspondiente a dicha id y no la sé recuperar..

Muchas gracias de antemano..

Saludos

Naahuel 23/04/2012 04:54
Respuesta: Pasar variable a ventana modal jquery
 
Creo comprender.

Estudiá este ejemplo:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  5.     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" />
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  7.     <script type="text/javascript">
  8.         
  9.         $(document).ready(function() {
  10.             //obtener el elemento contenedor del dialogo y 
  11.             //guardarlo en una variable, ya que lo usamos con frecuencia
  12.             var $dialog_contenedor = $('#imgprod');
  13.             
  14.             //Usamos clases en lugar de id, la idea es tener muchos de estos
  15.             //elementos en la página
  16.             $('.dialog_link').click(function(evento){
  17.                 //el link que clickeamos tiene un atributo con
  18.                 //un ID de una galeria.
  19.                 var gallery_id = $(this).data('gid');
  20.                 
  21.                 //con ese ID, obtenemos las fotos o hacemos lo que queramos
  22.                 //una vez que tengamos un resultado, lo ponemos como html del contenedor
  23.                 //del dialogo.
  24.                 //para ejemplificar, sólo lo muestro dentro del dialogo
  25.                 $dialog_contenedor.html('<p>'+ gallery_id +'</p>');
  26.                 
  27.                 //para finalizar, abro el dialogo
  28.                 //Si se obtienen las fotos con AJAX, por ejemplo,
  29.                 //esta accion se debe realizar una vez que termine la petición
  30.                 $dialog_contenedor.dialog('open');
  31.                 
  32.                 //evito la acción por defecto del enlace
  33.                 evento.preventDefault();
  34.             });
  35.             
  36.             //crear el dialogo
  37.             $dialog_contenedor.dialog({
  38.                 autoOpen: false,
  39.                 width: 500,
  40.                 height: 500,
  41.                 show: 'fade',
  42.                 hide: 'fade',
  43.                 modal: true,
  44.                 buttons: {
  45.                     "Cerrar": function() {
  46.                         $(this).dialog("close");
  47.                     }
  48.                 }
  49.                 
  50.             });
  51.         });
  52.  
  53. </script>
  54.  
  55.     <title></title>
  56. </head>
  57. <body>
  58.     
  59.     <a href="#" class="dialog_link" data-gid="1">Fotos</a>
  60.     <a href="#" class="dialog_link" data-gid="2">Fotos</a>
  61.     <a href="#" class="dialog_link" data-gid="3">Fotos</a>
  62.     
  63.     
  64.     <div id="imgprod"></div>
  65. </body>
  66. </html>

Leé las notas que te puse en los comentarios del código.

Creo que es más correcto tener clases en lugar de ID's para los dialog_link, porque me imagino que el problema de antemano es que hay varios de esos en la página. Sino, no haría falta todo esto me imagino.

Modifico el ejemplo anterior para algo un poco más concreto:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  5.     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" />
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  7.     <script type="text/javascript">
  8.         
  9.         $(document).ready(function() {
  10.             //obtener el elemento contenedor del dialogo y 
  11.             //guardarlo en una variable, ya que lo usamos con frecuencia
  12.             var $dialog_contenedor = $('#imgprod');
  13.             
  14.             //Usamos clases en lugar de id, la idea es tener muchos de estos
  15.             //elementos en la página
  16.             $('.dialog_link').click(function(evento){
  17.                 //el link que clickeamos tiene un atributo con
  18.                 //un ID de una galeria.
  19.                 var gallery_id = $(this).attr('data-gid');
  20.                 
  21.                 //con ese ID, creamos un iframe que nos muestra
  22.                 //una galeria de Flickr.
  23.                 $dialog_contenedor.html('<iframe border="0" width="500" height="500" src="http://www.flickr.com/photos/diastema/sets/'+gallery_id+'/"></iframe>');
  24.                 
  25.                 //para finalizar, abro el dialogo
  26.                 //Si se obtienen las fotos con AJAX, por ejemplo,
  27.                 //esta accion se debe realizar una vez que termine la petición
  28.                 $dialog_contenedor.dialog('open');
  29.                 
  30.                 //evito la acción por defecto del enlace
  31.                 evento.preventDefault();
  32.             });
  33.             
  34.             //crear el dialogo
  35.             $dialog_contenedor.dialog({
  36.                 autoOpen: false,
  37.                 width: 500,
  38.                 height: 500,
  39.                 show: 'fade',
  40.                 hide: 'fade',
  41.                 modal: true,
  42.                 buttons: {
  43.                     "Cerrar": function() {
  44.                         $(this).dialog("close");
  45.                     }
  46.                 }
  47.                 
  48.             });
  49.         });
  50.  
  51. </script>
  52.  
  53.     <title></title>
  54. </head>
  55. <body>
  56.     
  57.     <p><a href="#" class="dialog_link" data-gid="1037024">Toys</a></p>
  58.     <p><a href="#" class="dialog_link" data-gid="72157603448937963">The egg and i</a></p>
  59.     <p><a href="#" class="dialog_link" data-gid="72157600320979038">Scraps</a></p>
  60.     
  61.     
  62.     <div id="imgprod"></div>
  63. </body>
  64. </html>

Naahuel 23/04/2012 05:02
Respuesta: Pasar variable a ventana modal jquery
 
Importante:

Estuve teniendo problemas usando .data(), así que te diría que cambies:
Código Javascript: 
Ver original
  1. var gallery_id = $(this).data('gid');

por:
Código Javascript: 
Ver original
  1. var gallery_id = $(this).attr('data-gid');

arqrym 23/04/2012 06:00
Respuesta: Pasar variable a ventana modal jquery
 
Cita:
Iniciado por Naahuel (Mensaje 4171745)
Importante:

Estuve teniendo problemas usando .data(), así que te diría que cambies:
Código Javascript: 
Ver original
  1. var gallery_id = $(this).data('gid');

por:
Código Javascript: 
Ver original
  1. var gallery_id = $(this).attr('data-gid');
Muchísimas gracias, no sabía como afrontar esto y ya lo acabo de conseguir.. Me ha salido perfecto lo que quería..

Otra última duda con este código rescato sólo una imagen, como haría para hacer una navegación de imágenes con todas las imágenes del producto? El equivalente a un do-while de php..

De nuevo, muchísimas gracias de antemano..

Naahuel 23/04/2012 06:23
Respuesta: Pasar variable a ventana modal jquery
 
Y tendrías que crear una galería y usar algún plugin para que las muestre como querés.

Si eso es lo que querías hacer, por qué no usar:

FanyBox

ó

Colorbox
Como en este ejemplo: http://www.jacklmoore.com/colorbox/example1/

arqrym 23/04/2012 09:06
Respuesta: Pasar variable a ventana modal jquery
 
Cita:
Iniciado por Naahuel (Mensaje 4171774)
Y tendrías que crear una galería y usar algún plugin para que las muestre como querés.

Si eso es lo que querías hacer, por qué no usar:

FanyBox

ó

Colorbox
Como en este ejemplo: http://www.jacklmoore.com/colorbox/example1/
Muchas gracias, lo he estado mirando por encima y me surge el mismo problema de cómo rescatar todas las imágenes del producto dinámicamente...

En el ejemplo que me pusiste no se puede ya que rescato la primera imagen rescatarla todas?? o es algo complicado y no tan sencillo como una galería en php?


Al menos he comprendido lo de meter variables..ya que estoy muy verde en jquery..

Muchas gracias por tu ayuda y a ver si puedo aclararme un poco los conceptos..

arqrym 23/04/2012 15:09
Respuesta: Pasar variable a ventana modal jquery
 
Cita:
Iniciado por Naahuel (Mensaje 4171774)
Y tendrías que crear una galería y usar algún plugin para que las muestre como querés.

Si eso es lo que querías hacer, por qué no usar:

FanyBox

ó

Colorbox
Como en este ejemplo: http://www.jacklmoore.com/colorbox/example1/
He conseguido hacer un bucle y que me muestre por colorbox las imágenes que tenga para cada producto. Muchas gracias.

El problema que me ha surgido ahora es que como en el ejemplo de colorbox me muestra un enlace para cada foto, y si tengo por ejemplo 15 imágenes de un producto me muestra 15 link ( como en el ejemplo ponen 3). Aquí viene la pregunta, ¿ como hago para mediante un boton que ponga "imágenes del producto" me recoga el bucle for sin mostrame un enlace para cada foto y me lo muestre en colorbox?


Muchas gracias de antemano..

Naahuel 23/04/2012 15:40
Respuesta: Pasar variable a ventana modal jquery
 
Y podés poner sólo un link a la primera imagen... Listá todos los <a> en algún contenedor (<p> o <div>) dales una clase (además de la que usás para agrupar) y con CSS ocultá todos los que no quieras mostrar. Es la solución más rápida que se me ocurre.


La zona horaria es GMT -6. Ahora son las 01:08.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.