Content load on image click

  • Ok. So, I have a “works” page that basically shows a galley of paintings. The gallery is located in a seperate post that is posted onto the “works” page using:

    <?php query_posts( 'p=32' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content('Read More ?'); ?>

    Simple enough. Now what I want to do is be able to post another post’s (let’s say post 50’s) content as well.

    What I have is a page with two divs, one side “left” and the other side “right”.

    On the right side I have two thumbnails (let’s say a circle and a square). When I click on the circle, I want the content from post 50 to load, and when I want the other, the content from post 32… all in the “left” div.

    Hopefully that makes sense. It seems do-able to me, but I unfortunately don’t have too much experience in how to do this. I’d appreciate any help. :]

    EDIT: Oh yes, I should probably add that the images are not from attatchments. The posts only contain text that calls the plugins that display the galleries. :]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter toxiccosmos

    (@toxiccosmos)

    Maybe there’s a plugin that can do this? I’m desperate for any kind of help. :/

    Try this:

    <?php
$post_id = ****YOUR POST ID HERE***;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
echo $queried_post->post_content;
?>
    Thread Starter toxiccosmos

    (@toxiccosmos)

    Thank you for your reply. I really appreciate it.

    How would I set this up so that it does this when I click on one of the image links?

    Here’s the basic layout… very bare bones since I haven’t been able to figure it out.

    <div id="gleft">
</div>

<div id="gright">
  CHOOSE A VIEW MODE
  <br /><br /><br />
  <a href="#"><img src="/images/circles.gif" /></a>
  <br /><br /><br />
  <a href="#"><img src="/images/grid.gif" /></a>
</div>

    I want to get the content to load in the “gleft” div.

    I did some searching and I’m starting to think I’ll need to use AJAX. I found this link, but I couldn’t get it to work. So I found this slight motification on it. That seemed to try and do something, though still nothing loaded.

    I don’t know if you know any AJAX or maybe I should open a new thread for it specifically?

    Anyway, continuing with what I did with AJAX, I had this in my header:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
        $.ajaxSetup({cache:false});
        $(".thumb").click(function(){
            var post_url = $(this).attr("href");
	    var post_id = $(this).attr("rel");
            $("#left").html("loading...");
            $("#left").load(post_url);
	window.location.hash = post_id;
        return false;
        });

    });
</script>

    and this on my page:

    <div id="left"></div>

<div id="right">
<?php query_posts( 'p=50' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a class="thumb" rel="<?php the_permalink();?>" href="<?php the_permalink();?>"><img src="/images/circles.gif" /></a>

<?php endwhile; endif; ?>
<br />

<?php query_posts( 'p=32' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<a class="thumb2" rel="<?php the_permalink();?>" href="<?php the_permalink();?>"><img src="/images/grid.gif" /></a>

<?php endwhile; endif; ?>

</div>

    But there is no the_content php line, so I’m not sure how it’s really supposed to work. In the links I listed it seemed like there were two pages used, the index and another. This confused me, and I’ve posted there asking for clarification (but maybe someone here might know), but I’m not using this on my index page. My index is going to be a splash page.

    Maybe I’m adding too much here, but this is my process thus far. But of course, any way of getting this done would be wonderful. :]

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Content load on image click’ is closed to new replies.