Combining fancybox with multiple thumbnail plugin

Question

I'm combining fancybox(jquery) with multiple post thumbnail plugin. Basically the idea is when the user click the featured image post it will display the image on the secondary featured image. Here is the code that i'm working on.

     <?php query_posts('posts_per_page=-1&cat=10'); if(have_posts()) : while(have_posts()) :the_post(); ?>
            <div class="collections_thumbnails">

              <a class="fancybox" href="<?php MultiPostThumbnails::get_the_post_thumbnail(get_post_type, 'secondary-image'); ?>"><?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '">';  } ?></a>
              <div class="hover_dress">
                <h3><a class="dress_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
              </div>
            </div>
    <?php endwhile; endif; wp_reset_query();?>

The problem right now whenever i click the featured, it displays the featured image in the fancybox instead of the secondary image and the featured image disappears once i close the fancybox. Has anyone tried this approach when creating post featured image with fancybox.

Here is a screenshot of what the output looks like

and here is a screen shot of what is set in the secondary image

This is the link for the website i'm building at the moment -

http://digitalspin.ph/pluma/?page_id=8

http://i255.photobucket.com/albums/hh140/testament1234/second-image_zpsfb2bd810.jpg

Answer 1

I managed to get the result on my own after much playing with the codes. Here is the working code :)

<div class="collections_dresses_container">

            <?php query_posts('posts_per_page=-1&cat=10'); if(have_posts()) : while(have_posts()) :the_post(); ?>
            <div class="collections_thumbnails">

<?php 
    $imgID = get_post_thumbnail_id();
    $url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
?>


              <?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a class="fancybox" href="' . $large_image_url[0] . '"><img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '"></a>';  } ?>

              <div class="hover_dress">
                <a class="fancybox" href="<?php echo $url; ?>"><span><?php the_title(); ?></span></a>
              </div>
              <?php /*
              <div class="hover_dress">
                <h3><a class="dress_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
              </div>
              */ ?>

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

</div>