Displaying custom post-types in a Fancybox div and then linking to them

If popup div is out of the question since you have a lot of projects on a page then another option is to use ajax to grab the project content which shouldn’t be too hard. and an even simpler solution would be to use jQuery .load()

first wrap you thumbnails with a link to the project page:

<a class="project_thumb" href="https://wordpress.stackexchange.com/questions/19124/<?php echo get_permalink(); ?>"> ... thumbnail here </a> 

then add this js code:

<script>
    $(document).ready(function(){
        $('.project_thumb').live('click', function(e){
            e.preventDefault();
            var url = $(this).attr('href');
            url = url + ' #portfolioProject';
            $('#content').load(url, function(data, stat, req){
                $(this).fancybox();
            });
        })
    });
</script>

and just change #content to the id of the content container of your single project view.

Leave a Comment