jQuery инструменты наложения только открытие 1 элемент

Question

Так что я работаю с проблемой, когда у меня есть страница в Wordpress, запрашивающая пользовательский тип сообщения. Он тянет имя и изображение. Когда вы щелкаете по изображенному изображению, открывается всплывающее окно с содержимым и другой информацией. Вот ссылка: http://pegasusemergencygrp.com.s164407.gridserver.com/who-we-are/meet-our-team/

Это вызов в моей page.php файле:

  <?php 
      query_posts(array('post_type' => 'doctors')); 
      if (have_posts()) : while (have_posts()) : the_post(); 
     ?> 

      <aside class="doctor"> 

       <span class="photo"> 
        <?php the_post_thumbnail('full', array('data-rel' => "#$post->ID")); ?> 
       </span> 

       <ul> 
        <li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li> 
        <li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li> 
        <li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li> 
        <li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li> 
       </ul> 

       <p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p> 

       <article class="simple_overlay" id="<?php the_id(); ?>"> 

        <?php the_post_thumbnail('full'); ?> 

        <ul> 
         <li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li> 
         <li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li> 
         <li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li> 
         <li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li> 
        </ul> 

        <p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p> 

        <div class="clear"></div> 

        <hr> 

        <p><?php the_content(); ?></p> 

       </article><!--end of .simple_overlay--> 

      </aside><!--end of .doctor--> 

     <?php endwhile; endif; wp_reset_query(); ?> 

Вот мой JS:

jQuery(document).ready(function() { 
    var imgatt = jQuery("span.photo a img").attr('data-rel'); 
    jQuery("span.photo a img").overlay({ 
     target: imgatt, 
    }); }); 

Сценарий полу работает, когда я нажимаю на изображение, которое оно всплывает, открывает информацию, но если я нажму на второй снимок, он также откроет информацию о первых элементах. Они оба генерируют уникальные идентификаторы в теге data-rel с идентификатором post, а класс статьи overlay имеет соответствующий идентификатор. Источник: http://jquerytools.org/demos/overlay/index.html

Answer 1

Решает проблему. Любой, кто может наткнуться на это, появляется наложение jQuery Tools на сложное время с атрибутом data-rel на отображаемом изображении. Вместо этого я повторно настроил jQuery, чтобы найти тег rel на якоре перед отображаемым изображением и вызвать идентификатор сообщения в теге rel.

WP Код:

<a rel="#<?php the_id(); ?>" href="#<?php the_id(); ?>" class="bio"><?php the_post_thumbnail('full'); ?></a> 

JQuery:

// Team Bios Overlay 
jQuery(document).ready(function() { 
    jQuery('a.bio[rel]').overlay({ 
     mask: '#000', 
     effect: 'apple' 
    }); 
}); 

Надеется, что это помогает кто-то с подобным сценарием