Les dejo un link donde se puede ver:
http://seoone.es/socios/plantilla_area/plantilla-futbol-atleti-futbol-7-201314/
El div de la ficha con los detalles de cada jugador es "overlay-container". Os dejo el php y mas abajo el archivo javascript que hace aparecer y desaparecer el div:
Código PHP:
<table class="jugadoresplantilla">
<tr>
<th>Apellidos</th>
<th>Nombre</th>
<th>Posición</th>
<th>Fecha Nacimiento</th>
<th class="masinfo"></th>
</tr>
<?php query_posts('post_type=jugadores&showposts=-1&order=ASC');
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$custom = get_post_custom($post->ID);
$nombrejug = $custom["nombrejug"][0];
$apellidosjug = $custom["apellidosjug"][0];
$apellidosjug = $custom["apellidosjug"][0];
$apodojug = $custom["apodojug"][0];
$numjug = $custom["numjug"][0];
$pesojug = $custom["pesojug"][0];
$estaturajug = $custom["estaturajug"][0];
$fechajug = $custom["fechajug"][0];
?>
<tr>
<td><?=$apellidosjug?></td>
<td><?=$nombrejug?></td>
<td><?=$posicionjug ?></td>
<td><?=$fechajug?></td>
<td class="masinfo"><input type="button" value="+info" class="button" data-type="zoomin" /></td>
</tr>
<div class="overlay-container">
<div class="window-container zoomin">
<div class="profile_jugador fl"><?php the_post_thumbnail(); ?></div>
<div class="descripcion_jugador fl">
<ul>
<li><span>Nombre: </span><?=$nombrejug?></li>
<li><span>Apellidos: </span><?=$apellidosjug?></li>
<li><span>Posición: </span><?=$posicionjug ?></li>
<li><span>Apodo: </span><?=$apodojug?></li>
<li><span>Número: </span><?=$numjug?></li>
<li><span>Peso: </span><?=$pesojug?></li>
<li><span>Estatura: </span><?=$estaturajug?></li>
<li><span>Fecha Nacimiento: </span><?=$fechajug?></li>
</ul>
</div>
<span class="close">Cerrar</span>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</table>
Código Javascript:
Si alguien puede echarme una mano y sabe como solucionarlo se lo agradecería.Ver original
$(document).ready(function() { $('.button').click(function() { type = $(this).attr('data-type'); $('.overlay-container').fadeIn(function() { window.setTimeout(function(){ $('.window-container.'+type).addClass('window-container-visible'); }, 100); }); }); $('.close').click(function() { $('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible'); }); });
Muchas gracias
Rocha