Problema con botón de mostrar información en tabla de WordPress

rocha · 9 Sep 2013

Hola buenas. Ando atascado en Wordpress tratando de solucionar esta tabla en la que se repite el número de filas segun en el número de post (en este caso jugadores) que se van creando desde el admin de wordpress. Todo funciona perfecto, a la derecha de cada fila de cada jugador sale el boton de "+info" y salta, con javascript, un div con la ficha de info de cada jugador. El problema viene que solo me muestra la info del ultimo jugador añadido aunque haga click en el boton de "+info" de otros jugadores. He mirado el cod. fuente y si me crea cada fila en la tabla con su respectivo div de la info de cada jugador.

Les dejo un link donde se puede ver:
Plantilla Fútbol Atleti Fútbol 7 2013/14 | Atlético Club de Socios

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:

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>

y el javascript:

Insertar CODE, HTML o PHP:

$(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

Problema con botón de mostrar información en tabla de WordPress

rocha