Creo comprender.
Estudiá este ejemplo:
Código HTML:
Ver original<!DOCTYPE html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
//obtener el elemento contenedor del dialogo y
//guardarlo en una variable, ya que lo usamos con frecuencia
var $dialog_contenedor = $('#imgprod');
//Usamos clases en lugar de id, la idea es tener muchos de estos
//elementos en la página
$('.dialog_link').click(function(evento){
//el link que clickeamos tiene un atributo con
//un ID de una galeria.
var gallery_id = $(this).data('gid');
//con ese ID, obtenemos las fotos o hacemos lo que queramos
//una vez que tengamos un resultado, lo ponemos como html del contenedor
//del dialogo.
//para ejemplificar, sólo lo muestro dentro del dialogo
$dialog_contenedor.html('
<p>'+ gallery_id +'
</p>');
//para finalizar, abro el dialogo
//Si se obtienen las fotos con AJAX, por ejemplo,
//esta accion se debe realizar una vez que termine la petición
$dialog_contenedor.dialog('open');
//evito la acción por defecto del enlace
evento.preventDefault();
});
//crear el dialogo
$dialog_contenedor.dialog({
autoOpen: false,
width: 500,
height: 500,
show: 'fade',
hide: 'fade',
modal: true,
buttons: {
"Cerrar": function() {
$(this).dialog("close");
}
}
});
});
<a href="#" class="dialog_link" data-gid="1">Fotos
</a> <a href="#" class="dialog_link" data-gid="2">Fotos
</a> <a href="#" class="dialog_link" data-gid="3">Fotos
</a>
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<!DOCTYPE html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
//obtener el elemento contenedor del dialogo y
//guardarlo en una variable, ya que lo usamos con frecuencia
var $dialog_contenedor = $('#imgprod');
//Usamos clases en lugar de id, la idea es tener muchos de estos
//elementos en la página
$('.dialog_link').click(function(evento){
//el link que clickeamos tiene un atributo con
//un ID de una galeria.
var gallery_id = $(this).attr('data-gid');
//con ese ID, creamos un iframe que nos muestra
//una galeria de Flickr.
$dialog_contenedor.html('
<iframe border="0" width="500" height="500" src="http://www.flickr.com/photos/diastema/sets/'+gallery_id+'/"></iframe>');
//para finalizar, abro el dialogo
//Si se obtienen las fotos con AJAX, por ejemplo,
//esta accion se debe realizar una vez que termine la petición
$dialog_contenedor.dialog('open');
//evito la acción por defecto del enlace
evento.preventDefault();
});
//crear el dialogo
$dialog_contenedor.dialog({
autoOpen: false,
width: 500,
height: 500,
show: 'fade',
hide: 'fade',
modal: true,
buttons: {
"Cerrar": function() {
$(this).dialog("close");
}
}
});
});
<p><a href="#" class="dialog_link" data-gid="1037024">Toys
</a></p> <p><a href="#" class="dialog_link" data-gid="72157603448937963">The egg and i
</a></p> <p><a href="#" class="dialog_link" data-gid="72157600320979038">Scraps
</a></p>