Combining fancybox with multiple thumbnail plugin

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=-1cat=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"
                h3a 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

Topic php jquery css cms Wordpress

Category Web

1
answered at

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>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.