jQuery tools overlay only opening 1 element

Question

So I am running in to an issue where I have a page in Wordpress querying a custom post type. It pull in the name and featured image. When you click the featured image it opens a popup with the content and some other info. Here is the link: http://pegasusemergencygrp.com.s164407.gridserver.com/who-we-are/meet-our-team/

This is the call in my page.php file:

            <?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(); ?>

Here is my JS:

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

The script is semi working, when I click on the picture it pops open the info but if I click on the 2nd picture it pops open the first items info as well. They are both generating unique ID's on the data-rel tag with the post id and the overlay article class has the matching ID. Source: http://jquerytools.org/demos/overlay/index.html

Answer 1

Solved the issue. Anyone who may stumble on this it appears jQuery Tools overlay has a hard time with the data-rel attribute on the featured image. Instead I re-configured the jQuery to find the rel tag on the anchor before the featured image and call the post id on the rel tag.

WP Code:

<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'
    });
});

Hope this helps someone else with a similar scenario