saber cual item fue clikado

[catpaw]

hola

tengo la siguiente lista:

Código HTML:

<ul id="thumblist" class="clearfix">
   <li><a href="javascript:void(0);" onclick="$('#dd').dialog('open')" rel="{gallery: 'gal1', smallimage: 'folder/simagen1.jpg',largeimage: 'folder/limagen1.jpg'}"><img alt="" src='folder/imagen1.jpg' width="116" height="93" /></a></li>
   <li><a href="javascript:void(0);" onclick="$('#dd').dialog('open')" rel="{gallery: 'gal1', smallimage: 'folder/simagen2.jpg',largeimage: 'folder/limagen2.jpg'}"><img alt="" src='folder/imagen2.jpg' width="116" height="93" /></a></li>
   <li><a href="javascript:void(0);" onclick="$('#dd').dialog('open')" rel="{gallery: 'gal1', smallimage: 'folder/simagen3.jpg',largeimage: 'folder/limagen3.jpg'}"><img alt="" src='folder/imagen3.jpg' width="116" height="93" /></a></li>
   <!--mas items-->
</ul>
 

el codigo es de una lista de miniaturas de imagenes, que al dar clic sobre alguna miniatura se abre la imagen en una ventana modal,

bueno y estas son mis dudas

como puedo saber cual <li></li> o <a><a/> ha seleccionado el usuario??
deberia agregar alguna propiedad que me facilite saber cual se a selaccionado??

una vez que sepa cual se selcciono como me traigo los datos de la propiedad rel??

segun yo es con var= $('#id').prop('rel'); no?

y depues como accedo a cada dato del rel?? es decir, ya tengo el rel en la variable var, recordemos que rel es:

rel="{gallery: 'gal1', smallimage: 'folder/simagen3.jpg',largeimage: 'folder/limagen3.jpg'}

por ejemplo si yo quiero smallimage, haria algo asi??:

var simag = var.smallimage; funcionaria ???

espero puendan ayudarme, gracias

[maycolalvarez]

recuerda que puedes usar this para obtener la instancia del objeto, de hecho con jquery puedes usar $(this)

[catpaw]

hola maycolalvarez

de hecho fue lo primero que probe:

rel = $(this).prop('rel'); //thumblist
alert(rel);

pero me sale undefinded

es que creo que porque lo estoy lanzando desde otra funcion, por que lo necesito saber al momento de abrir mi ventana modal, entonces creo que ahi no conserva el this

Código Javascript:

$('#dd').dialog({  
    title: 'Imagen',  
    width: 500,  
    height: 500,  
    closed: true,  
    cache: false,  
    modal: true,
    onOpen:function(){
        //aqui necesito saber que <a> seleccionaron para extraer los datos de su rel
        rel = $(this).prop('rel');
        alert(rel);
        $('.jqzoom').jqzoom({
            zoomType: 'innerzoom',
            lens: true,
            preloadImages: false,
            alwaysOn: false
        });
    }  
});
 

[Aeon1]

Iniciado por catpaw

hola maycolalvarez

de hecho fue lo primero que probe:

rel = $(this).prop('rel'); //thumblist
alert(rel);

pero me sale undefinded

es que creo que porque lo estoy lanzando desde otra funcion, por que lo necesito saber al momento de abrir mi ventana modal, entonces creo que ahi no conserva el this

Código Javascript:

$('#dd').dialog({  
    title: 'Imagen',  
    width: 500,  
    height: 500,  
    closed: true,  
    cache: false,  
    modal: true,
    onOpen:function(){
        //aqui necesito saber que <a> seleccionaron para extraer los datos de su rel
        rel = $(this).prop('rel');
        alert(rel);
        $('.jqzoom').jqzoom({
            zoomType: 'innerzoom',
            lens: true,
            preloadImages: false,
            alwaysOn: false
        });
    }  
});
 

cambia rel = $(this).prop('rel');
por rel = $(this).attr('rel');

[catpaw]

hola Aeon1, te comento que es mejor usar prop, eso lei por algun lado, de todos modos no creo que este ahi el detalle...gracias

Tengo un avance:

Código Javascript:

$("#thumblist").click(function(e){
    var a = e.target.parentNode;
    rel = a.rel; alert('rel '+rel); //este alert si me da el valor del rel
    s = rel.smallimage;
    b = rel.largeimage;
    alert('s '+s); //aca obtengo undefined
    alert('b '+b); //aca undefined
});
 

ya tengo el valor del rel, pero ahora necesito sacar del rel smallimage y largeimage

pense que podia acceder a esos valores con

s = rel.smallimage;
b = rel.largeimage;

pero es incorrecto, saben como se podria? o no se puede?

gracias

[America|UNK]

En jQuery existe la funcion data() para no tener que trabajar con propiedades de HTML y agregar valores al objeto.

Código javascript:

$("#thumblist a").click(function(){
  $(this).data("clickado","si") // esto tambien lo puedes colocar en la llamada onOpen de tu modal
})
 
//para obtener la lista..
function obtener(){
  var clickados = [];
  $("#thumblist a").each(function(){
    $(this).data("clickado") == "si" && clickados.push($(this))
  });
  return clickados
}
 

PD: Puedes agregar tambien mas datos, ejem: $(this).data("smallimage","..").data("largeimage," ...")