Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

Thanks,

Ash

share|improve this question

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:

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

share|improve this answer
    
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 '11 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 '11 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 '11 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 '11 at 22:29
    
Just had a go at that too, no luck! [link]ashleymosuro.com/newsite/portfolio –  remi90 Jun 6 '11 at 9:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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