1

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.

6
  • why would you link to the_permalink() if you are trying to open up an image? Find it's URL using wp_get_attachment_image_src or similar, and echoing out it's URL in the <a> tag. codex.wordpress.org/Function_Reference/… – GhostToast Jun 5 '13 at 15:42
  • If you have fancybox working already, what markup do you need to achieve to have it work with your links? – Rarst Jun 5 '13 at 16:26
  • rel="fancybox" but as GhostToast said, the problem seems to come from the_permalink() since it's already working with img src. I think I have to write a proper query with wp_get_attachment_image_src instead, is that right? I'm still trying to understand how it works... – wyem Jun 5 '13 at 16:35
  • @GhostToast to be more clear, I try to open the images from a post, hence the_permalink. I though it could be an easy way to target the post and then retrieve all images attached to this post. – wyem Jun 5 '13 at 18:19
  • You should read a bit more in the Codex. the_permalink is for links to posts. I thought you wanted to Fancybox an image? – GhostToast Jun 5 '13 at 18:21
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.

2
  • I appreciate you took the time to write something detailed, but I'm not sure we're going the right way. I mentioned ajax cause I used it on a previous project. Would you accept to open a chat room to discuss it more efficiently? I don't have enough reputation to do so... – wyem Jun 5 '13 at 19:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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