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 -

/?page_id=8

.jpg

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/albums/hh140/testament1234/second-image_zpsfb2bd810.jpg

• php
• jquery
• css
• cms

• Could you rewrite your question? It's not really clear what you're asking. – Kay van Bree Commented Jan 14, 2014 at 10:50

1 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>