Load post attached images on a single page site with fancybox

Question

I'm trying to make a single page site that will display posts as thumbnails in some part. Then if a thumbnail is clicked, I want all the images contained in this post to be loaded with fancybox while the user is staying on the home.

I'm loading the first image on my template with this
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>.
And post images are just created in the editor this way
<a href="blabla/image.jpg"><img src="blabla/image.jpg" /></a> .

When I click the thumbnail, the browser follows the permalink. So I'm stuck with 2 different approaches now.

1. Loading the_content of the post and then hiding all the images BUT the first...

2. Keeping on with the_post_thumbnail(); and then write something that will find the post ID, and then will display the rest of the attached images.

I'm aiming for the 2nd one, but I'm a very novice WP dev so don't know how to write the "find ID" function... Anyone can help? BTW Fancybox is running OK, I can open images.

Answer 1

I think I understand what you are trying to achieve now. You will need to modify the single.php (or single-post-type.php if it is a CPT) to run, via ajax, your gallery or whatever if the content is being viewed through ajax. Here is something (modified a bit) I have used in the past to do just that.

This is the main loop, pretty much just as you indicated above. We assume fancybox is loaded and ready.

while($loop->have_posts()) : $loop->the_post();
    echo '<a href="'.get_permalink().'" class="fancybox fancybox.ajax">'.
    get_the_post_thumbnail($post->ID, 'some-size', array('class' => 'some-class')).'</a>';
endwhile;

Add this function to functions.php. It will return true if the content is being viewed through an ajax request.

// content loading in ajax? 
function is_ajax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest");
}

Then on your single, you'll want to figure out if you're in ajax or not, to create something a bit like this:

if(is_ajax()){ 
    echo '<div class="gallery-holder">';
} else {
    get_header(); 
    // put any other divs that need to happen in a normal page here
}

// do something with your images here, such as an attachment loop

if(is_ajax()){ 
    echo '</div>'; // close anything we opened
} else {
    get_footer(); 
    // put any other closing divs here
}
wp_reset_query();

Realize that many people "tab browse" and so will open your thumbnail preview in a new tab, so this will allow your page to still be viewed in the alternative method.

It is also up to you how you want to run through all the images on the single.php.