Featured Image onlick reveal post content

  • Resolved jasonTIC

    (@jasontic)


    11 years, 11 months ago

    Hi guys,

    I’m currently building a one page site for a client and I am having some trouble getting a part of the site to work with featured images and post content.

    Basically I have created a category and tagged it with services and added the posts with featured images in – nothing complicated there. Then within the template file I have created a loop that pulls in the category id that then displays the featured image at the moment.

    What I am trying to do through javascript is to create a loop that pulls the featured image in as a link which, once clicked, reveals the said posts content to the right of it.

    I can bring the content in all at once within the loop but obviously I don’t want this displayed until it has been clicked.

    Below is the loop i’m currently using at the moment to bring everything in.

    <div id="third">
	<div class="wrap">
	<div class="twelvecol first">
    	<div class="eightcol">
    	<?php
         $blog_query = 'showposts=6&cat=4';
	$posts = query_posts($blog_query);
	while (have_posts()) : the_post();
	echo '<div class="fourcol first">';
	echo the_post_thumbnail('bones-thumb-slider');
	echo '</div>';

 endwhile; ?> 

<?php wp_reset_query(); ?>
    	</div><!-- end of eight col -->

    	<div class="threecol">
    	<p>This is some random text that should be pulling in on the right handside</p>
    	</div>

    </div> <!--.end of twelve-->
</div><!-- end of wrap -->
</div> <!--#third-->

    Any help would be greatly appreciated as I seem to have hit a brick wall on this one!!

    Thanks,

    Jason

Viewing 2 replies - 1 through 2 (of 2 total)

  • You could either use Ajax to pull the content or you could also output the content but wrap it in a container whose class is set to ‘display:none;’ via CSS.

    PHP

    echo '<div class="fourcol first">';
echo the_post_thumbnail('bones-thumb-slider');

echo ' <div class="content">' . get_the_content() . '</div>';

echo '</div>';

    CSS

    .fourcol .content {
  display:  none;
}

    Then in your Javascipt code you can attach a click event to the thumbnail, read the (CSS hidden) content and place it wherever you want it to show up (in your case the threecol div if I’m not mistaken)

    jQuery(document).ready(function(){

  jQuery('.fourcol img').click(function(){
    $('.threecol').html( $(this).siblings('.content').html() );
  });

});

    I would recommend going with something like this rather than Ajax because this way you can also create a nice print.css (since the actual content is also provided the HTML code).

    Thread Starter jasonTIC

    (@jasontic)

    Hi Chris,

    Thank you for the speedy response on this, if only my reply was as quick to let people know that this was exactly what I was looking for.

    It’s working exactly as intended although I seem to be having a couple of issues when clicking on one of the images in the sense that it pulls the post content in fine but when clicking on another image there doesn’t seem to be a click event happening. But when I try another and come back to the previous one it seems to work.

    I’m not sure whether this is something to do with any other javascript that I have within my build that could be conflicting with it but i’m going to have a deeper look into it.

    Thank you so much for your help on this Chris ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Featured Image onlick reveal post content’ is closed to new replies.