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 :
$(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'); }); });
Si alguien puede echarme una mano y sabe como solucionarlo se lo agradecería.
Muchas gracias
Rocha