How could I go about this…

I have a portfolio page, created using custom post-types, and on the portfolio page I have a number of thumbnails which I would like to link to each project I add through a custom post-type. Hope this part makes sense?

Where it gets tricky, I want each of these thumbnails to make use of the Fancybox plugin so that when a user clicks on a thumbnail it brings up a div container with all of the content I from that particular project's post. Lost me yet?

Its a bit difficult to explain, but hopefully someone out there will know what I mean and suggest how I can cleverly make the page grab all of the content within that thumbnail's post and display it with the Fancybox 'pop out'.

The reason for this is simply because I have a lot of projects I want to display, and if I were to have a file which included pop up div with content for each project, the file would be huge! And I just don't think its a great way to manage things.



1 Answer 1


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="<?php echo get_permalink(); ?>"> ... thumbnail here </a> 

then add this js code:

        $('.project_thumb').live('click', function(e){
            var url = $(this).attr('href');
            url = url + ' #portfolioProject';
            $('#content').load(url, function(data, stat, req){

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

  • I just had a go at this, but when I implement it to the site, doesn't seem to be solving the problem. [link]ashleymosuro.com/newsite/portfolio This is the page I'm trying to use it on. For some reason it seems to include the entire page into the fancybox whereas I only want a section of the page to be displayed. Plus, my close button seems to be playing up. Any suggestions?
    – remi90
    Jun 3, 2011 at 16:25
  • your code is looking for the wrong container , in your JS code change portfolioProject to mainContent to fix it. and let me know.
    – Bainternet
    Jun 3, 2011 at 16:32
  • A bit confused by that, because I have a div named portfolioProject which contains all of the elements I want to display within the fancy box. I have tried changing it to mainContent but still it displays the entire page within the fancybox, check the link again to see what I mean
    – remi90
    Jun 5, 2011 at 19:43
  • I see what you mean, i've updated the answer with a fixed code. i basically added the selector of the element to be returned. let me know
    – Bainternet
    Jun 5, 2011 at 22:29
  • Just had a go at that too, no luck! [link]ashleymosuro.com/newsite/portfolio
    – remi90
    Jun 6, 2011 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.