Espero me puedan ayudar con un problema.
Tengo una lista de articulos. Los cuales al darle click me tiene que aparecer una modal window que me tiene que mostrar, el nombre del articulo, su foto y una descripción.
El CSS es como se muestra en el siguiente codigo.
Código HTML:
<div id="contenedor">
<a href="#"><img class="wmodal" src="imagenes/articulo1.jpg"></a>
<p id="titulo" >Nombre del articulo 1</p>
<div id="Descripcion" style="Display: none;">
Descripcion del articulo 1.
</div>
</div>
<div id="contenedor">
<a href="#"><img class="wmodal" src="imagenes/articulo2.jpg"></a>
<p id="titulo" >Nombre del articulo 2</p>
<div id="Descripcion" style="Display: none;">
Descripcion del articulo 2.
</div>
</div> Elegi poner el mismo nombre para todos los divs para asi poder crear solo una funcion en jquery que funcione para todos, esto es por que tengo bastantes articulos y no quiero repetir tanto codigo.
No consigo, imprimir en la modal window el texto del #titulo y #Descripcion de cada imagen que doy click.
Es decir, si doy click en articulo2.jpg me manda el titulo y descripcion de el articulo1.
La funcion que tengo en Jquery es la siguiente.
Código PHP:
jQuery(function ($) {
$('#contenedor .wmodal').click(function (e) {
$.modal("<div><h1>" + $("#titulo").html() + "</h1>" + $(this) + $("#Descripcion").html() + "</div>");
return false;
});
});
He llamado esos divs de diferentes formas pero no consigo el resultado deseado, he intentado lo siguiente.
Código PHP:
$.modal($(this).next("#Descripcion").html());
Y todas las formas que intento la salida es Null ó [object Object] pero no obtengo el texto de cada div seleccionado.
Espero me puedan ayudar